CSS Grid Generator
Define grid tracks, place items, and copy production-ready CSS Grid code.
Grid Container
Items (5)
Live Preview
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
column-gap: 16px;
row-gap: 16px;
justify-items: stretch;
align-items: stretch;
}
.item-1 {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.item-2 {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
.item-3 {
grid-column: 3 / 4;
grid-row: 1 / 2;
}
.item-4 {
grid-column: 1 / 3;
grid-row: 2 / 3;
}
.item-5 {
grid-column: 3 / 4;
grid-row: 2 / 3;
}How to Use the CSS Grid Generator
- 1.Start with a preset (Blog, 3-Col, Dashboard, Gallery) or define your own column and row tracks.
- 2.Type column and row templates directly — use fr, px, %, auto, or minmax() units.
- 3.Select an item in the preview and set its grid-column and grid-row span using the sliders.
- 4.Adjust column gap, row gap, justify-items, and align-items to fine-tune the layout.
- 5.Copy the CSS or HTML output with a single click.
What is CSS Grid?
CSS Grid is a two-dimensional layout system that allows you to define explicit columns and rows, then place items anywhere within that grid — including spanning multiple cells. Unlike Flexbox, which distributes items along a single axis, Grid lets you control placement in both dimensions simultaneously, making it the best tool for page-level layouts and complex component arrangements.
The fr unit (fraction) is unique to Grid and distributes available space proportionally after fixed and auto-sized tracks are placed. 1fr 2fr 1fr creates three columns where the middle takes twice as much space as each side — a classic content + sidebar layout. repeat(3, 1fr) creates three equal columns concisely.
Grid items can span multiple columns or rows using grid-column: 1 / 3 notation. This makes it straightforward to build magazine-style layouts, dashboards with featured cards, and gallery grids where certain items are visually prominent. Grid and Flexbox complement each other — use Grid for the outer page structure, Flexbox for inner component alignment.
Frequently Asked Questions
What does the fr unit mean in CSS Grid?
The fr unit means "fraction of the available space in the grid container." After fixed and auto-sized tracks are placed, the remaining space is divided among fr tracks in proportion to their fr values. 1fr 1fr 1fr creates three equal columns.
How do I make a responsive grid without media queries?
Use grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)). This creates as many columns as fit given the minimum width, automatically adapting to the container width without any breakpoints. It is one of the most powerful responsive patterns in modern CSS.
When should I use Grid instead of Flexbox?
Use Grid when you need to control placement in two dimensions (rows and columns), when items need to span multiple cells, or when you want items to align to a rigid grid regardless of content size. Use Flexbox for content-driven, single-axis distributions where the layout should respond to item sizes.