🎛️ Grid Container Properties

The Container's Job

In the last lesson you defined tracks and sized them. Everything you set there lived on the grid container — the element carrying display: grid. The container is where the layout decisions live; the items simply obey. Container properties fall into four families:

Master these and you can express almost any two-dimensional layout, then re-express it entirely for a different screen size without touching your HTML.

Named Grid Lines

Counting lines by number works, but it gets brittle. Instead, you can name lines inside square brackets right in the template. A single line can carry several names.

.container {
  display: grid;
  grid-template-columns:
    [sidebar-start] 250px
    [sidebar-end content-start] 1fr
    [content-end];
  grid-template-rows:
    [header-start] 100px
    [header-end main-start] 1fr
    [main-end footer-start] 80px
    [footer-end];
}

Named lines are like street names instead of "third block from the edge" — an item placed at grid-column: content-start / content-end reads like intent, not arithmetic. You'll use these names for item placement in the next lesson.

grid-template-areas: layout you can read

The most loved Grid feature is grid-template-areas. You draw an ASCII map of your layout in CSS, then attach items to regions by name. The CSS looks like the page.

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

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

Two rules govern the map:

• Every named area must form a rectangle — no L-shapes or disjointed pieces.
• Every row string must have the same number of cells, or the whole declaration is invalid.

Use a period (.) to leave a cell deliberately empty:

grid-template-areas:
  "header  header  header"
  "sidebar content ."
  "footer  footer  footer";

Gap Properties

Gaps put breathing room between tracks without touching the outer edges. The modern properties are simply gap, row-gap, and column-gap:

.container {
  row-gap: 20px;      /* between rows */
  column-gap: 30px;   /* between columns */
  gap: 20px 30px;     /* shorthand: row-gap column-gap */
  gap: 20px;          /* one value applies to both */
}

Gaps accept any length, including responsive units, so spacing can scale with the viewport:

.container { gap: clamp(12px, 2vw, 32px); }

The Auto Properties & Dense Packing

When items land outside your explicit grid, the browser builds implicit tracks. Three properties tell it how.

grid-auto-rows / grid-auto-columns

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* explicit */
  grid-auto-rows: minmax(100px, auto);     /* implicit rows grow with content */
}

With three explicit columns, a seventh item spills onto a new implicit row sized by grid-auto-rows. Using minmax(100px, auto) keeps a comfortable minimum while letting tall content expand.

grid-auto-flow and the dense keyword

grid-auto-flow sets the direction auto-placed items fill — like the reading direction of a page:

• row (default) — fill left-to-right, then wrap down, like English text.
• column — fill top-to-bottom, then move right.
• dense — backfill earlier gaps with later, smaller items.

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row dense;   /* backfill holes */
  gap: 10px;
}
.tall { grid-row: span 2; }
.wide { grid-column: span 2; }

Alignment Properties

Grid has two pairs of alignment properties, and mixing them up is the single most common Grid confusion. The trick: content aligns the whole grid of tracks; items aligns each item inside its cell.

/* Distribute the track grid within a larger container */
.container {
  justify-content: space-between;  /* start | end | center | space-around | space-evenly | stretch */
  align-content: center;
  place-content: center space-between; /* align-content justify-content */
}

/* Align each item inside its cell (default is stretch) */
.container {
  justify-items: center;
  align-items: center;
  place-items: center;             /* align-items justify-items */
}

Individual items can override the container defaults with justify-self and align-self — covered in the next lesson on grid items.

The grid Shorthand

Two shorthands roll several properties into one. grid-template sets rows, columns, and areas together:

.page {
  display: grid;
  grid-template:
    "header  header  header" auto
    "sidebar content content" 1fr
    "footer  footer  footer" auto
    / 250px 1fr 1fr;   /* column sizes after the slash */
}

The full grid shorthand goes further, also folding in the auto properties. It has an auto-flow form too:

/* Auto-flow form: rows are 100px, two columns 1fr 2fr, flowing densely */
.container { grid: auto-flow dense 100px / 1fr 2fr; }

Hands-on Exercise

.dashboard {
  display: grid;
  gap: 16px;
  min-height: 100vh;
  grid-template-columns: 250px 1fr;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

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

@media (max-width: 600px) {
  .dashboard { gap: 10px; }  /* already single column; just tighten spacing */
}

Best Practices & Pitfalls

Summary & Quiz

📚 Further Reading

• MDN — Basic Concepts of Grid Layout
• CSS-Tricks — Complete Guide to Grid (container properties)
• Grid by Example — worked examples
• 1-Line Layouts (Una Kravets)

🚀 What's Next?

You can now shape a container completely. Next we switch sides and focus on the grid items — placing them by line, name, and span, and aligning each one individually with justify-self, align-self, order, and z-index.