LLM Best Practices

CSS Grid

2 min read

View markdown source

Overview

This page is the atomic definition. Full CSS layout guidance lives at css.

Definition

CSS Grid is a two-dimensional layout system that lets authors define rows and columns as explicit tracks (grid-template-columns, grid-template-rows) or auto-fill rules (repeat(auto-fill, minmax(200px, 1fr))). Items are placed into the resulting cells automatically or by specifying grid-column and grid-row spans. Grid is the right tool for page-level layouts and any design where rows and columns must align across both axes simultaneously. Flexbox handles one axis at a time; Grid handles both at once. Browser support for CSS Grid is universal as of 2017. Sub-grid (shipped in all major browsers in 2023) lets nested grids inherit the parent track definitions, which solves the alignment problem across card components.

When it applies

Use Grid for two-dimensional layouts: application shells with sidebar, header, and content areas; card grids where row height must be consistent; and any layout where alignment along both axes matters. Use Flexbox for one-dimensional sequences (navigation bars, button groups, flex-wrap lines).

Example

.app-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 64px 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  min-height: 100dvh;
}
  • css - the full CSS layout and specificity guide.
  • css-flexbox - the one-dimensional complement to Grid.
  • viewport - Grid units like dvh and svw depend on the viewport.
  • tailwind - Tailwind exposes Grid via grid, grid-cols-*, and col-span-* utilities.

Citing this term

See CSS Grid (llmbestpractices.com/glossary/css-grid).

Graph View

Backlinks