Define columns, rows, gaps and template areas visually. Generate production-ready CSS Grid code instantly.
CSS Grid is a two-dimensional layout system for the web. It lets you arrange elements in rows and columns simultaneously, define named areas, control gaps, and align content โ all in CSS without JavaScript. It's ideal for page-level layouts and complex component arrangements.
fr (fractional unit) represents a fraction of the available space in the grid container. For example, grid-template-columns: 1fr 2fr creates two columns where the second is twice as wide as the first. fr units only apply after fixed-size columns (px, rem, min-content) are accounted for.
The repeat() function lets you repeat a track pattern. repeat(3, 1fr) is equivalent to 1fr 1fr 1fr. You can use repeat(auto-fill, minmax(200px, 1fr)) to create a responsive grid that automatically fills available space with as many columns as fit.
Use CSS Grid for two-dimensional layouts (rows and columns together, page layouts, complex grids). Use Flexbox for one-dimensional layouts (a row of buttons, a vertical nav list, centred content). They're complementary โ it's common to use Grid for the page structure and Flexbox inside grid cells.