CSS Grid is the most powerful layout system on the web. While most developers know the basics, the advanced features — named lines, subgrid, auto-placement, and minmax() — unlock layouts that would otherwise require JavaScript. Firefox has first-class Grid support and the best grid inspector in any browser's DevTools.

Named Grid Lines

Instead of counting column numbers, name your lines:

.layout { display: grid; grid-template-columns: [sidebar-start] 240px [sidebar-end main-start] 1fr [main-end aside-start] 280px [aside-end]; grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end]; min-height: 100vh; } .sidebar { grid-column: sidebar-start / sidebar-end; grid-row: content-start / footer-end; } .main { grid-column: main-start / main-end; grid-row: content-start / content-end; }

Grid Template Areas

Visual layout declaration — arguably the most readable grid syntax:

.page { display: grid; grid-template-areas: "header header header" "sidebar main aside " "footer footer footer"; grid-template-columns: 200px 1fr 250px; grid-template-rows: auto 1fr auto; min-height: 100vh; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .main { grid-area: main; } .aside { grid-area: aside; } .footer { grid-area: footer; } /* Responsive: stack on mobile */ @media (max-width: 768px) { .page { grid-template-areas: "header" "main" "aside" "sidebar" "footer"; grid-template-columns: 1fr; } }

Auto-Placement and dense Packing 

.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; gap: 8px; grid-auto-flow: row dense; /* Fill gaps with smaller items */ } .featured { grid-column: span 2; grid-row: span 2; } /* Grid automatically places items to fill gaps */

grid-auto-flow: dense packs items into gaps, useful for masonry-style layouts.

minmax() and fit-content() 

/* Column that's at least 200px but grows up to 1fr */ .sidebar { width: minmax(200px, 1fr); } /* Used in grid tracks */ .grid { grid-template-columns: minmax(200px, 300px) /* sidebar: between 200-300px */ 1fr /* main: rest of space */ minmax(150px, auto); /* aside: at least 150px, auto otherwise */ } /* fit-content(): don't exceed the content's natural width */ .nav { grid-template-columns: fit-content(200px) 1fr; }

Repeat with auto-fill and auto-fit

Responsive grids without media queries:

/* auto-fill: creates as many columns as fit */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; } /* auto-fit: same but collapses empty tracks */ /* When you have 3 items in a 6-column grid: */ /* auto-fill: [item][item][item][empty][empty][empty] */ /* auto-fit: [item][item][item] (each stretches to fill) */ .cards-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

This creates a responsive card grid with NO media queries.

Subgrid

CSS Subgrid (Firefox supports this since Firefox 71!) lets nested elements align to the parent grid:

.parent { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto; gap: 16px; } .card { display: grid; grid-row: span 2; /* Participate in parent's column tracks */ grid-template-rows: subgrid; } .card-title { /* aligned to row 1 of parent */ } .card-body { /* aligned to row 2 of parent */ }

Without subgrid, card titles and bodies couldn't align across cards. With subgrid, all cards in the same row have aligned content.

Grid and Flexbox Together

Grid handles 2D layout; Flexbox handles 1D alignment within grid cells:

.grid-layout { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .card { /* Each cell is a flex container for vertical alignment */ display: flex; flex-direction: column; } .card-body { flex: 1; /* Pushes footer to bottom */ } .card-footer { margin-top: auto; }

Firefox Grid Inspector

Firefox DevTools has the best CSS Grid inspector:

  1. Open DevTools (F12)
  2. Go to the Layout panel
  3. Under Grid section, click the grid icon next to any grid element
  4. The overlay shows:
    • Grid lines with numbers and names
    • Track sizes (computed values)
    • Gap areas
    • grid-area names

The Firefox grid overlay is interactive — you can see exact pixel measurements by hovering over cells.

Intrinsic Sizing Keywords 

.grid { grid-template-columns: min-content /* shrinks to smallest non-overflow width */ max-content /* expands to fit all content without wrapping */ fit-content(200px) /* max-content but no wider than 200px */ 1fr; /* remaining space */ }

min-content and max-content are computed by the browser based on actual content — useful for sidebar/label columns that should be exactly as wide as their contents.

The place-items and place-content Shorthands 

.grid { display: grid; /* Align items within their cell */ justify-items: center; /* horizontal */ align-items: center; /* vertical */ place-items: center; /* both */ /* Align the grid tracks within the container */ justify-content: space-between; align-content: start; place-content: start space-between; /* align-content justify-content */ }

Practical: Full-Page App Layout 

.app { display: grid; grid-template: "topbar topbar " 56px "sidebar content" 1fr / 240px 1fr; height: 100dvh; overflow: hidden; } .topbar { grid-area: topbar; overflow: hidden; } .sidebar { grid-area: sidebar; overflow-y: auto; } .content { grid-area: content; overflow-y: auto; }

This creates a sticky topbar, scrollable sidebar, and main content area — the classic SPA layout — in ~10 lines of CSS with no JavaScript.