Complete CSS Grid Guide — 2025 Edition

CSS Grid is a two-dimensional layout system that controls rows and columns in one shot—perfect for dashboards, magazine layouts, and complex application shells. It became a W3C Recommendation in 2017 and has evolved with subgrid (2023), masonry proposals (Level 3), and soon anchor-positioning interplay (2025).

1. Grid Container — element with display:grid or inline-grid.
2. Grid Items — direct children of the container.
3. Grid Tracks — rows & columns created via grid-template-rows / grid-template-columns.
4. Cell — single intersection of a row and column.
5. Grid Areas — rectangular groups of cells named via grid-template-areas.
6. Explicit vs Implicit Grid — tracks declared by the author vs tracks auto-created by the algorithm.

Fixed, Fluid & Flexible Units

.layout{
  display:grid;
  grid-template-columns: 12rem 1fr 12rem;   /* fixed + fluid */
  grid-template-rows:    auto 1fr auto;     /* auto-height header/footer */
}

Repeat & Fraction (fr)

/* Three equal columns */
.gallery{
  grid-template-columns: repeat(3,1fr);
}

auto-fill vs auto-fit

/* Responsive cards = minimum 16rem, otherwise stretch */
.cards{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(16rem,1fr));
  gap:1rem;
}

Use minmax() with min-content/max-content and fit-content() for intrinsic sizing.

.item-a{ grid-column:1 / 3;   grid-row:1 / 2; }
.item-b{ grid-column:3;       grid-row:1 / 3; }

Named Lines

.wrapper{
  grid-template-columns:[sidebar-start]12rem[sidebar-end main-start]1fr[main-end];
}
.content{grid-column:main-start / main-end;}

.page{
  display:grid;
  grid-template:
    "header header"  4rem
    "nav    main  "  1fr
    "footer footer" 3rem
    / 14rem 1fr;
}

<header>, <nav>, <main>, and <footer> elements simply receive grid-area:header … and voilà.

The auto-placement engine puts untargeted items row-by-row (grid-auto-flow:row) or column-by-column. Use dense to fill gaps; beware of re-ordering impacts on accessibility.

.mosaic{
  grid-auto-flow:row dense;
  grid-auto-columns:minmax(10rem,1fr);
}

.grid{
  justify-items:center;   /* x inside each cell */
  align-items:start;      /* y inside each cell */
  justify-content:center; /* x tracks as a group */
  align-content:start;    /* y tracks as a group */
  gap:clamp(.5rem,2vw,1.2rem);
}

With subgrid a child becomes part of its ancestor’s track sizing—perfect for card sets where captions align across rows. Supported in Firefox 109+, Safari 17+, and Chromium 122+.

.card-group{display:grid;grid:1fr auto/1fr 1fr 1fr}
.card-group figure{
  display:subgrid;
  grid-template-rows:subgrid;
}

The Masonry proposal introduces a third track-sizing mode (masonry) that packs items like bricks while keeping the opposite axis in strict grid. It’s still experimental but visible behind flags in Firefox Nightly.

.masonry{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));
  grid-template-rows:masonry;
}

Fallback now: column-count, JS libraries, or pseudo-masonry via flexbox.

Anchor Positioning lets absolutely-positioned tooltips snap relative to grid items via the anchor() function. Chrome 125+/Safari TP ship partial support in 2025.

.tooltip{
  position-anchor:--card;
  position:anchor(--card top);
}

Media-Query Grid Switch

@media (min-width:60rem){
  .sidebar-layout{
    grid-template-columns:14rem 1fr;
  }
}

Container-Query Card Grid

Cards adapt within any parent that establishes container-type:inline-size — no viewport assumptions needed.

.cards{container-type:inline-size}
@container (min-width:36cqw){
  .cards{grid-template-columns:repeat(2,1fr)}
}

Holy Grail Layout (Modern)

.holy-grail{
  display:grid;
  grid-template:
    "header" 4rem
    "main"   1fr
    "footer" 3rem
    / 1fr;
}
@media (min-width:64rem){
  .holy-grail{
    grid-template:
      "header header" 4rem
      "nav    main  " 1fr
      "footer footer" 3rem
      / 14rem 1fr;
  }
}

12-Span Bootstrap-like Grid

.row{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:1rem;
}
.col-4{grid-column:span 4}

1. Enable grid overlay in DevTools (all major browsers).
2. Animate sub-grid lines using background-images: repeating-linear-gradient().
3. Avoid huge implicit grids; set grid-auto-rows: 1fr or prune item counts.
4. Combine content-visibility:auto with grid for long scroll lists.

Title	Year	URL
CSS Grid Level 1	2025	w3.org/TR/css-grid-1
CSS Grid Level 3 WD	2025	w3.org/TR/css-grid-3
CSS Anchor Positioning Update	2025	w3.org/blog/CSS
MDN Container Queries	2025	developer.mozilla.org