CSS Grid Cheat Sheet: Template Columns, Areas, Gap & Auto-Fit

CSS Grid is a two-dimensional layout system: you define columns and rows on a container, then place items by line or by named area. Use repeat, minmax, and auto-fit for responsive galleries without a forest of breakpoints.

This CSS cheat sheet is written for people searching for a fast, accurate reference: students, junior developers, and teams shipping production software. Pin it, copy the snippets, and come back when syntax slips.

Quick reference

• Define: display: grid plus grid-template-columns / grid-template-rows.
• fr: 1fr is a share of leftover free space after fixed tracks.
• Gap: gap between tracks. Items do not need margin for gutters.
• Areas: grid-template-areas plus grid-area names a page in ASCII art.
• Place: grid-column: 1 / 3 spans lines. span 2 is the same idea.
• minmax: minmax(16rem, 1fr) will not shrink a card below 16rem.
• auto-fit: repeat(auto-fit, minmax(16rem, 1fr)) wraps columns as the container narrows.
• Align: place-items / place-content / place-self for alignment inside cells.

Copy-paste examples

Holy-grail areas and a card gallery

Named areas keep the HTML order logical. Auto-fit handles the gallery without a breakpoint per column count.

.page {
  display: grid;
  grid-template-columns: 12rem 1fr;
  grid-template-areas:
    "nav main"
    "nav footer";
  gap: 1.5rem;
}
.page nav { grid-area: nav; }
.page main { grid-area: main; }
.page footer { grid-area: footer; }
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

Common mistakes

• Using Grid for a single row of buttons — Flexbox is simpler.
• Mixing 1fr 1fr with large padding and wondering why columns overflow (use minmax(0, 1fr)).
• Forgetting minmax(0, 1fr) on grid children that contain long words or pre blocks.
• Absolute-positioning items instead of placing them on grid lines.

FAQ

1. Grid or Flexbox? Grid for pages and 2D alignment. Flex for components along one axis. Using both on one page is normal.

1. What is the difference between implicit and explicit grid? Explicit tracks are ones you defined. Extra items create implicit tracks using grid-auto-rows / grid-auto-columns.

1. Do I still need media queries? Less often for card counts. You still need them for navigation patterns, type scale, and art-directed images.

Related CSS cheat sheets

• Css Cheat Sheet 2026
• Css Flexbox Cheat Sheet
• Css Selectors Cheat Sheet

Build with this stack

When a cheat sheet is not enough — you need a production app, a student FYP, or a custom dashboard — ArpaNeuro builds custom web development and also sells ready-made source code. Request a quote and tell us the stack.

Browse software development services or the source code marketplace if you want a working codebase instead of starting from a blank file.