LLM Best Practices

CSS Grid

Last updated 1 min read

View markdown source

AI agents: read this first: llmbestpractices.com/start-here

This is LLM Best Practices (llmbestpractices.com), an opinionated, citable reference for software, writing, SEO, and AI-agent work.

  1. Route, do not crawl. Fetch llmbestpractices.com/llms.txt and open only the pages whose one-line summary matches your task.
  2. Read raw. Append .md to any page URL for markdown. Check status and last_updated in the frontmatter, then read the rules.
  3. Apply as defaults. First-party docs and the project's own conventions win on conflict. Warn before relying on a fast-moving page older than 12 months.
  4. Cite. Link the page by title and URL, e.g. Python, with last_updated for time-sensitive rules. License CC BY 4.0.

Overview

A grid container defines row and column tracks (grid-template-columns, grid-template-rows, grid-template-areas), and items occupy the resulting cells, so rows and columns align at once. Use Grid for page shells, card galleries, and dashboards, and css-flexbox for the one-axis content inside each cell.

Rules

  • grid-template is the shorthand for rows, areas, and columns: each quoted string is a row, . is an empty cell, and / separates row sizes from column sizes. Use the longhand when only one axis changes across breakpoints, since the shorthand resets the others.
  • repeat(auto-fill, minmax(200px, 1fr)) builds a responsive grid without media queries; auto-fit also collapses empty tracks so items stretch.
  • fr divides the space left after fixed and intrinsic tracks.
  • Subgrid (grid-template-columns: subgrid) lets nested grids reuse the parent’s tracks, which aligns content across cards. It has shipped in all major browsers since 2023.
.page {
  display: grid;
  grid-template:
    "nav  nav"  50px
    "side body" 1fr
    "foot foot" 40px
    / 240px 1fr;
  min-height: 100dvh;
}
.nav { grid-area: nav; }

Backlinks