grid-template-columns / rows: explicit grid

Define the track sizes

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 200px;   /* three columns: fixed, fluid, fixed */
  grid-template-rows: 60px auto 40px;        /* three rows: fixed top, content middle, fixed bottom */
}

The browser creates a grid with those tracks. Children flow into cells row-by-row by default.

Unit choices

• Fixed pixels (200px) — exact width/height.
• `fr` (fractional) — fraction of REMAINING space after fixed sizes are subtracted.
• `auto` — sized to fit content.
• `min-content` / `max-content` — intrinsic content size (covered in lesson 11).
• `%` — percentage of the grid container.

grid-template-columns: 200px 1fr 1fr;       /* 200px sidebar, two equal-width content cols */
grid-template-columns: 1fr 2fr 1fr;          /* middle column is 2x as wide */
grid-template-columns: auto 1fr;             /* "label column" + "content column" */

Implicit rows

If you don't set grid-template-rows, the browser creates rows AS NEEDED to hold the children. Each implicit row is sized by its content unless you set grid-auto-rows:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 100px;       /* every implicit row is 100px tall */
}

When to use template-rows

Mostly when you have a FIXED page layout: topbar 60px + main fluid + footer 40px. Defining all rows ensures the layout never shifts as content changes.