CSS Grid Complete Guide 2026: Master Modern Layouts with Practical Examples

CSS Grid is the most powerful layout system ever built into the CSS specification, and in 2026 it has become the foundational tool for building modern web layouts. Where older layout methods like floats and positioned elements required workarounds and hacks to achieve complex arrangements, CSS Grid provides a native, purpose-built two-dimensional layout system that handles rows and columns simultaneously with precise, flexible control. Browser support is now universal — every major browser has supported CSS Grid for years — and the specification has continued to evolve with useful additions like subgrid, container queries integration, and masonry layout (now in wide support).

This guide covers CSS Grid comprehensively: from the foundational properties you need for everyday layouts to advanced techniques for building sophisticated, responsive designs with minimal code. All examples are practical and directly applicable to real-world web projects.

Understanding Grid Containers and Grid Items

CSS Grid is applied by setting display: grid (or display: inline-grid) on a container element. This makes the element a grid container and all of its direct children become grid items. It is important to understand that only direct children participate in the grid — nested descendants do not unless they are also made into grid containers themselves.

The grid container defines the structure of the grid through properties like grid-template-columns and grid-template-rows, which specify the number and sizing of columns and rows respectively. Grid items are placed into this structure automatically (following document flow order) or explicitly using placement properties. The space between tracks is controlled with gap (which is shorthand for row-gap and column-gap).

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 300px auto;
  gap: 1.5rem;
}

This creates a three-column grid where the middle column is twice the width of the outer columns (using the flexible fr unit), three rows with the middle row having a fixed height, and 1.5rem of space between all grid cells.

Grid Tracks: Columns, Rows, and the fr Unit

Grid tracks are the rows and columns of the grid, defined using grid-template-columns and grid-template-rows. These properties accept a powerful vocabulary of size values that allow precise and flexible control over how tracks size themselves.

Fixed, Auto, and Fractional Sizing

Fixed sizes (px, rem, em, %) define tracks with absolute or relative dimensions. Auto sizing means the track grows to fit its content. The fr (fractional) unit divides the available free space proportionally among tracks that use it — after fixed and auto tracks have taken their space. This makes fr the most useful unit for flexible, responsive grid layouts.

/* A common sidebar layout */
.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 2rem;
}

/* Three equal columns */
.three-col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /* Or the shorthand: */
  /* grid-template-columns: repeat(3, 1fr); */
}

The repeat() Function and minmax()

The repeat() function eliminates repetition when defining tracks of the same size. repeat(4, 1fr) is equivalent to 1fr 1fr 1fr 1fr. The minmax() function defines a track with a minimum and maximum size, allowing tracks to flex within a range. Combining these produces the most useful responsive grid pattern in CSS: the auto-fill or auto-fit responsive column pattern.

/* Responsive grid: columns are at least 250px wide,
   filling as many as will fit per row */
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

This single declaration creates a fully responsive grid that automatically adjusts the number of columns based on the container width, with no media queries required. When the container is 800px wide, it fits three 250px+ columns. At 500px, it fits two. At 300px, it fits one. This pattern has largely replaced many media-query-based grid systems.

Placing Items on the Grid

By default, grid items flow into the grid in document order, one per cell, left to right, top to bottom (or following the writing direction). Explicit placement overrides this flow by specifying exactly where an item starts and ends in the grid.

Grid Lines and Span Syntax

Grid placement uses numbered lines — the lines between and around tracks. A three-column grid has four column lines (1 through 4) and lines can also be referenced from the end with negative numbers (-1 is the last line). Items are placed using grid-column and grid-row, which can specify start and end lines or use the span keyword.

.featured-item {
  /* Span from column line 1 to line 3 (two columns wide) */
  grid-column: 1 / 3;
  /* Or equivalently: */
  grid-column: 1 / span 2;

  /* Span two rows */
  grid-row: span 2;
}

.full-width {
  /* Span the full width of the grid */
  grid-column: 1 / -1;
}

Named Grid Areas

Named grid areas are one of the most readable and maintainable features of CSS Grid. Instead of tracking column and row line numbers, you define a visual map of your layout using string names, then assign elements to those areas using the grid-area property. This makes the layout immediately legible to anyone reading the CSS — the template reads almost like a diagram of the page.

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

header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
main    { grid-area: main; }
footer  { grid-area: footer; }

To create a responsive version that stacks the sidebar below the main content on small screens, simply redefine grid-template-areas in a media query:

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

Alignment and Justification in CSS Grid

CSS Grid provides a comprehensive alignment system through the Box Alignment specification. The key properties control how items are aligned within their grid cells and how the grid itself is aligned within its container.

Aligning Items Within Their Cells

align-items and justify-items control the default alignment of all items within their cells. align-items controls the block (vertical) axis; justify-items controls the inline (horizontal) axis. Values include start, end, center, and stretch (the default — items fill their cell). Individual items can override the container defaults using align-self and justify-self.

/* Center all items within their cells */
.grid-container {
  display: grid;
  align-items: center;
  justify-items: center;
}

/* Stretch an individual item to fill its cell height */
.tall-item {
  align-self: stretch;
}

Aligning the Grid Within the Container

When the total grid size is smaller than the container, align-content and justify-content control how the grid tracks are distributed within the container space, much like flexbox’s align-content and justify-content. Values include start, end, center, space-between, space-around, and space-evenly.

CSS Subgrid

Subgrid, now fully supported in all major browsers in 2026, solves one of the most persistent layout challenges in CSS: aligning nested elements across parent grid tracks. Before subgrid, if you had a card component inside a grid and wanted the card’s internal elements to align with the parent grid’s columns, you needed JavaScript or complex workarounds. With subgrid, a child element can inherit its parent’s grid tracks directly.

.parent-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.child-spanning-full {
  grid-column: 1 / -1;
  display: grid;
  /* Inherit the parent's column tracks */
  grid-template-columns: subgrid;
}

/* Now children of .child-spanning-full
   align to the parent grid's columns */

Subgrid is transformative for card-based layouts where you want image, heading, body text, and CTA button to align vertically across multiple cards in the same row — previously impossible with CSS alone.

Practical Layout Examples

Holy Grail Layout

The classic “Holy Grail” layout (header, three-column middle, footer) that once required complex floats or table display hacks is trivially simple with CSS Grid:

.holy-grail {
  display: grid;
  grid-template:
    "header header header" auto
    "nav    main   aside" 1fr
    "footer footer footer" auto
    / 200px 1fr 200px;
  min-height: 100vh;
}

header { grid-area: header; }
nav    { grid-area: nav; }
main   { grid-area: main; }
aside  { grid-area: aside; }
footer { grid-area: footer; }

Magazine-Style Editorial Layout

CSS Grid makes complex editorial layouts with irregular cell sizes — large feature articles alongside smaller thumbnails — straightforward to build without JavaScript:

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

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

.secondary-story {
  grid-column: span 2;
}

.tertiary-story {
  grid-column: span 2;
  grid-row: span 2;
}

Grid vs Flexbox: When to Use Each

A common source of confusion for developers learning modern CSS is when to use CSS Grid versus Flexbox. The practical answer: use Flexbox for one-dimensional layouts (a row of navigation items, a single row of cards, vertically centered content within a container) and CSS Grid for two-dimensional layouts (page-level layouts, card grids where both row and column alignment matter, any layout where you need items to align across both axes simultaneously). In practice, most complex layouts use both: CSS Grid for the overall page structure and major component layouts, Flexbox for the internal arrangement of components.

Advanced Techniques: Dense Packing and Auto-Placement

CSS Grid’s auto-placement algorithm fills grid cells in order by default, but the grid-auto-flow: dense property instructs the algorithm to backfill smaller items into gaps left by larger spanning items. This is useful for masonry-like layouts where items have varying sizes:

.packed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: 150px;
  grid-auto-flow: dense;
  gap: 1rem;
}

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

Conclusion

CSS Grid has fundamentally changed what is possible in web layout without JavaScript, and in 2026 it is no longer an advanced technique — it is the expected baseline for professional web development. The combination of named grid areas for readable templates, the repeat/minmax/auto-fill pattern for responsive grids, subgrid for nested alignment, and dense auto-placement for complex card layouts covers the vast majority of layout challenges web developers face. The investment in deeply understanding CSS Grid pays off through cleaner code, less reliance on JavaScript for layout logic, better performance, and layouts that are genuinely easier to maintain and extend as designs evolve.