Build CSS Grid layouts visually. Define columns, rows, gap, and item placement — then copy production-ready CSS & HTML.
CSS Grid is a two-dimensional layout system that lets you create complex, responsive layouts with clean, readable code. Unlike Flexbox (which is one-dimensional), Grid handles both columns and rows simultaneously.
grid-template-columns and grid-template-rows define the track sizes. You can use fixed values (200px), flexible values (1fr), or functions like minmax() and repeat().
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 1fr auto;
gap: 16px;
}
The fr unit represents a fraction of available space. 1fr 2fr 1fr creates three columns where the middle is twice as wide as the sides. It's the most common unit in Grid layouts.
Grid items can span multiple columns or rows using grid-column and grid-row:
.header {
grid-column: 1 / -1; /* span all columns */
}
.sidebar {
grid-row: 2 / 4; /* span rows 2-3 */
}
repeat(auto-fill, minmax(250px, 1fr)) creates as many columns as fit, keeping empty tracks. auto-fit collapses empty tracks so items stretch to fill the row. Use auto-fill for consistent sizing, auto-fit for stretching.
Like this tool? Check out our other free dev tools
Browse 45+ Free Tools →CSS Grid is a two-dimensional layout system that lets you control both rows and columns simultaneously. Use it when building complex page layouts like dashboards, magazine-style pages, or any design requiring precise placement in both directions. It's ideal for overall page structure, while Flexbox handles one-dimensional alignment within components.
Use auto-fill or auto-fit with minmax() in grid-template-columns, for example: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)). This automatically wraps columns based on available space. You can also use media queries to change the number of columns at different breakpoints without changing the underlying grid structure.
grid-template-columns defines explicit column tracks you specify upfront. grid-auto-columns sets the size of implicitly created columns when items overflow the defined grid. Use grid-template-columns for known layouts and grid-auto-columns as a fallback for dynamically added content that exceeds your defined columns.
The fr unit represents a fraction of the available space in the grid container. For example, grid-template-columns: 1fr 2fr 1fr creates three columns where the middle takes twice the space of the others. It distributes remaining space after fixed-size columns are accounted for, making fr perfect for flexible responsive layouts.
Use grid-column: span 2 to make an item span two columns, or grid-row: span 3 for three rows. For precise placement, use grid-column: 1 / 3 to start at column line 1 and end at line 3. The grid-area shorthand combines row-start, column-start, row-end, and column-end in one property.