CSS Grid Advanced: Named Lines, Subgrid, auto-fit, and the Firefox Inspector

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.