Eric Campbell 5 min read JavaScript

CSS Grid: Two-Dimensional Layout Guide

CSS Grid Layout shipped in 2017 after years of development, solving a problem web developers had struggled with since the beginning: creating sophisticated two-dimensional layouts without tables,...

Key Insights

  • CSS Grid excels at two-dimensional layouts where you need control over both rows and columns simultaneously, while Flexbox is better for one-dimensional flows—use Grid for page layouts and Flexbox for component internals.
  • The repeat(), minmax(), and auto-fit/auto-fill functions enable truly responsive grids that adapt without media queries, eliminating hundreds of lines of breakpoint-specific CSS.
  • Grid’s explicit placement system allows elements to overlap and span arbitrary cell ranges, enabling complex magazine-style layouts that were previously impossible without absolute positioning hacks.

Introduction to CSS Grid

CSS Grid Layout shipped in 2017 after years of development, solving a problem web developers had struggled with since the beginning: creating sophisticated two-dimensional layouts without tables, floats, or positioning hacks. Before Grid, even simple layouts required complex calculations, clearfix hacks, and fragile CSS that broke easily.

The fundamental difference between Grid and Flexbox comes down to dimensionality. Flexbox handles one dimension at a time—either rows or columns. Grid handles both simultaneously. Use Flexbox when arranging items in a single direction (navigation bars, button groups, card contents). Use Grid when you need to control layout in both dimensions (page layouts, dashboards, image galleries).

Browser support is excellent. All modern browsers have supported Grid since 2017, with over 96% global support. Unless you’re supporting IE11, you can use Grid in production today.

Here’s the simplest Grid setup:

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
  min-height: 100vh;
}

This creates a three-column, three-row grid with fixed-width sidebars and a flexible center column. The 1fr unit means “one fraction of available space”—Grid’s killer feature for responsive layouts.

Grid Container Properties

Grid containers define the structure for their children. The most important properties are grid-template-columns and grid-template-rows, which establish your grid tracks.

The gap property (formerly grid-gap) creates gutters between cells without affecting outer margins. It’s cleaner than adding margins to individual items:

.grid {
  display: grid;
  gap: 20px; /* shorthand for row-gap and column-gap */
  row-gap: 30px; /* override just row spacing if needed */
}

For a classic 12-column responsive grid system:

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.span-6 {
  grid-column: span 6;
}

.span-4 {
  grid-column: span 4;
}

.span-3 {
  grid-column: span 3;
}

Grid template areas provide semantic, readable layouts using ASCII-art syntax:

.page-layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
  min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

This approach makes layouts self-documenting and easy to modify. Want to move the sidebar? Just change the template areas string.

Grid Item Placement

Grid items can be positioned precisely using line numbers or named areas. Grid lines start at 1, not 0:

.item {
  grid-column: 2 / 4; /* start at line 2, end at line 4 */
  grid-row: 1 / 3;
}

/* Shorthand using span */
.item-span {
  grid-column: 2 / span 2; /* start at line 2, span 2 columns */
}

Grid’s auto-placement algorithm flows items into cells automatically, but you can override it. Items can overlap, creating layered effects:

.overlap-layout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.background-image {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  z-index: 1;
}

.foreground-content {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
  z-index: 2;
  background: white;
  padding: 20px;
}

Asymmetric layouts become trivial:

.magazine-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 200px;
  gap: 16px;
}

.featured {
  grid-column: span 4;
  grid-row: span 2;
}

.secondary {
  grid-column: span 2;
}

.tertiary {
  grid-column: span 2;
}

Responsive Grid Layouts

Grid’s responsive capabilities eliminate most media queries. The auto-fit and auto-fill keywords create grids that adapt automatically:

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

This creates as many columns as fit in the container, with each column at least 280px wide. The difference between auto-fit and auto-fill:

  • auto-fill creates as many tracks as fit, even if empty
  • auto-fit collapses empty tracks, expanding remaining items

Use auto-fit for card grids where you want items to grow. Use auto-fill when you want consistent sizing even with fewer items.

The minmax() function provides flexible constraints:

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
}

The nested min(100%, 300px) ensures columns never exceed container width on mobile—a crucial detail for preventing horizontal scroll.

Combine Grid with modern CSS functions for fluid layouts:

.fluid-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(250px, 30vw, 400px), 1fr));
  gap: clamp(16px, 2vw, 32px);
}

Advanced Grid Techniques

Implicit grids handle overflow automatically. When items don’t fit in explicitly defined rows, Grid creates implicit rows:

.auto-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px; /* size for implicitly created rows */
  gap: 16px;
}

The grid-auto-flow property controls how auto-placed items flow. The dense keyword fills holes:

.masonry-style {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 100px;
  grid-auto-flow: dense;
  gap: 16px;
}

.tall { grid-row: span 2; }
.wide { grid-column: span 2; }
.large { 
  grid-column: span 2;
  grid-row: span 2;
}

Dense packing creates visually appealing layouts but breaks source order, which impacts accessibility. Use it only for decorative content.

Alignment properties control item positioning within cells:

.aligned-grid {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  justify-items: center; /* horizontal alignment */
  align-items: center; /* vertical alignment */
  gap: 20px;
}

.special-item {
  justify-self: end; /* override for individual item */
  align-self: start;
}

Real-World Implementation

Here’s a complete responsive dashboard layout:

.dashboard {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "sidebar footer footer";
  grid-template-columns: minmax(200px, 250px) 1fr minmax(200px, 300px);
  grid-template-rows: auto 1fr auto;
  gap: 20px;
  min-height: 100vh;
  padding: 20px;
}

.dashboard-header {
  grid-area: header;
  background: #1a1a1a;
  color: white;
  padding: 20px;
  border-radius: 8px;
}

.dashboard-sidebar {
  grid-area: sidebar;
  background: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
}

.dashboard-main {
  grid-area: main;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  align-content: start;
}

.dashboard-aside {
  grid-area: aside;
  background: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
}

.dashboard-footer {
  grid-area: footer;
  padding: 20px;
  text-align: center;
}

@media (max-width: 1024px) {
  .dashboard {
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "aside"
      "footer";
    grid-template-columns: 1fr;
  }
}

Common gotchas to avoid:

  1. Forgetting min-width on grid items: Grid items can shrink below their content size. Use minmax() or set explicit min-widths.
  2. Overusing dense packing: It breaks keyboard navigation and screen reader order.
  3. Not testing with varying content: Real content rarely matches your design mockups perfectly.
  4. Ignoring implicit grid sizing: Set grid-auto-rows to prevent unexpectedly sized overflow rows.

Performance is excellent. Grid is hardware-accelerated and more performant than float-based layouts or flexbox for complex two-dimensional layouts. The browser calculates layout once rather than multiple times for nested flexbox containers.

For accessibility, maintain logical source order. Screen readers and keyboard navigation follow DOM order, not visual grid placement. Use Grid for visual arrangement, but keep HTML semantically ordered.

Conclusion

CSS Grid transforms web layout from a constant battle with CSS quirks into an intuitive, powerful system. Master the core concepts—explicit grid definition, item placement, and responsive functions—and you’ll write cleaner, more maintainable CSS.

Start simple: use Grid for page layouts and Flexbox for components. Experiment with auto-fit and minmax() to eliminate media queries. Use template areas for readable, maintainable layouts.

For debugging, browser DevTools are essential. Firefox has the best Grid inspector, highlighting grid lines and area names. Chrome and Edge also provide excellent Grid visualization tools.

Grid isn’t just another CSS feature—it’s the layout system the web should have had from the beginning. Use it.

Liked this? There's more.

Every week: one practical technique, explained simply, with code you can use immediately.