LLM Best Practices

Grid Template

2 min read

View markdown source

Definition

grid-template is a shorthand that combines grid-template-rows, grid-template-columns, and grid-template-areas into one declaration. The named-areas form is the most readable:

grid-template:
  "header header" 60px
  "sidebar main"  1fr
  "footer footer" 40px
  / 200px 1fr;

Each quoted string is one row; whitespace separates cell names; identical names spanning adjacent cells merge into one area. The slash separates row sizes from column sizes. A . in a quoted string marks an unnamed cell.

Individual properties:

  • grid-template-columns: defines column track sizes (fr, px, %, auto, min-content, max-content, minmax()).
  • grid-template-rows: defines row track sizes.
  • grid-template-areas: names cells for use with grid-area on children.

The fr unit distributes remaining space after fixed and intrinsic tracks are sized. repeat(auto-fill, minmax(200px, 1fr)) creates a responsive multi-column grid without media queries.

When it applies

Use grid-template for two-dimensional layouts: page shells, card grids, dashboards. Use flexbox for one-dimensional component interiors (toolbars, stacks). Grid is the better choice when both row alignment and column alignment matter simultaneously.

Avoid the shorthand when only columns need explicit sizing; grid-template-columns alone is clearer and less error-prone.

Example

.page {
  display: grid;
  grid-template:
    "nav  nav"    50px
    "side body"   1fr
    "foot foot"   40px
    / 240px 1fr;
  min-height: 100vh;
}
 
.nav  { grid-area: nav; }
.side { grid-area: side; }
.body { grid-area: body; }
.foot { grid-area: foot; }
  • css-grid - the full grid model including implicit tracks and alignment.
  • flex-direction - flex is the sibling layout model for one-dimensional flows.
  • container-query - container queries let grid layouts adapt to parent size, not just viewport.
  • layout-shift - grid tracks that change size after paint cause CLS.
  • css - the CSS deep-dive.

Citing this term

See Grid Template (llmbestpractices.com/glossary/grid-template).

Graph View

Backlinks