CSS Grid Guide:
Two-Dimensional Layout

CSS Grid: Two-Dimensional Layout Done Right

For twenty years, web layouts were built with tables, then floats, then flexbox. Each handled one dimension well and the other dimension awkwardly. CSS Grid, released in 2017, was the first layout system designed from scratch for two-dimensional control — rows AND columns simultaneously, with explicit placement and alignment in both axes. display: grid on a container, define your columns and rows, place items where you want them. The browser handles the math. A CSS grid generator lets you configure grids visually and see the CSS in real-time. Choose columns, rows, gaps, and item placements — copy the generated CSS directly into your project.

Core Grid Properties

grid-template-columns / grid-template-rows. Define the grid structure. grid-template-columns: 1fr 2fr 1fr creates three columns where the middle is twice as wide as the sides. grid-template-columns: repeat(3, 1fr) creates three equal columns. grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) creates responsive columns that automatically fill the container and wrap — a responsive card grid without a single media query. The fr unit (fraction) is Grid's killer feature: it divides available space proportionally after accounting for fixed-size tracks and gaps. No more percentage math.

column-gap / row-gap. Space between grid tracks. gap: 16px sets both. Replaces the old margin-on-every-child pattern. Gap is only between tracks, not at the edges — no need to remove margin from the last item.

grid-column / grid-row. Place items explicitly. grid-column: 1 / 3 spans from column line 1 to line 3 (occupying 2 columns). grid-row: 2 / 4 spans rows 2-3. Use span for relative placement: grid-column: span 2 takes 2 columns from wherever the auto-placement puts it. This is how you create magazine-style layouts — a featured article spanning two columns, sidebar items in a third column.

Grid Template Areas: Layout as ASCII Art

The most intuitive way to define a grid layout: grid-template-areas. You draw the layout in your CSS as a text diagram:

grid-template-areas:
  "header  header  header"
  "sidebar content content"
  "footer  footer  footer";

Then assign each element to an area: grid-area: header. The visual structure IS the code. Change the layout by rearranging the ASCII diagram. This is the closest CSS has come to WYSIWYG layout. Combined with media queries, you can completely reorganize the page at different breakpoints by redefining the template areas — no HTML restructuring needed.

Grid vs. Flexbox: A Clear Decision Framework

Use Grid when you need to control both rows and columns — page layouts, image galleries with consistent alignment, dashboard widgets, any layout where items should align to a defined grid. Use Flexbox when you only need one-dimensional control — navigation bars, centering a single element, spacing items in a single row or column, toolbars.

A practical workflow: Grid for the page skeleton (header, sidebar, main, footer), Flexbox for the components inside each grid cell (the navigation menu in the header, the card list in the main area). They nest naturally — a grid item can be a flex container. This composition pattern handles virtually all modern layout needs. Use our grid generator for the page structure and the flexbox generator for the components.

Browser Support and Fallbacks

CSS Grid is supported in every modern browser — Chrome 57+ (March 2017), Firefox 52+, Safari 10.1+, Edge 16+. That's 99%+ of global browser usage. IE11 supports an older version of Grid with different syntax (the -ms- prefix). If IE11 support matters for your project, use feature queries (@supports (display: grid)) to provide flexbox fallbacks. For most projects, IE11 is no longer a concern. Grid is production-ready and has been for years. For more on CSS layout fundamentals, pair this guide with the Box Shadow Generator and Border Radius Generator to style the elements you lay out with Grid.