CSS Grid Cheatsheet — Complete Quick Reference (2026)

In this tutorial, you'll learn about CSS Grid Cheatsheet. We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.

CSS Grid Layout is a two-dimensional layout system that controls both columns and rows simultaneously, enabling complex responsive designs without nested containers.

Container Properties

| Property | Values | Description | |----------|--------|-------------| | display | grid, inline-grid | Enable grid | | grid-template-columns | <track-size> ... | Column definitions | | grid-template-rows | <track-size> ... | Row definitions | | grid-template-areas | "a b" "c d" | Named areas | | grid-template | Shorthand for columns + rows + areas | | gap / grid-gap | <length> | Gutters between cells | | column-gap / row-gap | <length> | Directional gutters | | justify-items | start, end, center, stretch | Horizontal item alignment | | align-items | start, end, center, stretch | Vertical item alignment | | place-items | <align> <justify> | Shorthand for both | | justify-content | start, end, center, stretch, space-around, etc. | Grid alignment in container | | align-content | Same | Row alignment in container | | grid-auto-columns | <track-size> | Implicit column size | | grid-auto-rows | <track-size> | Implicit row size | | grid-auto-flow | row, column, dense | Auto-placement |

Item Properties

.item {
  grid-column: 1 / 3;   /* span from line 1 to 3 */
  grid-row: 1 / -1;     /* span full height */
}

Grid Functions

Named Template Areas

.layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header  header"
    "nav     main    aside"
    "footer  footer  footer";
  min-height: 100vh;
}
header  { grid-area: header; }
nav     { grid-area: nav; }
main    { grid-area: main; }
aside   { grid-area: aside; }
footer  { grid-area: footer; }

Responsive Patterns

Auto-fill vs auto-fit:

/* Auto-fill — adds empty columns when extra space exists */
.grid-fill { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* Auto-fit — collapses empty columns, items stretch */
.grid-fit { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

Responsive without media queries:

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

Must-Know Items

• 1fr distributes available space (not total) — gap is subtracted first
• auto-fill preserves empty track spaces; auto-fit collapses them to let items grow
• Negative line numbers count from end: -1 is last column line
• grid-auto-flow: dense fills holes but changes DOM order visually
• place-items: center centers all items both horizontally and vertically
• subgrid inherits grid lines from parent (limited browser support in 2026)
• Grid and Flexbox complement each other — use Grid for 2D layouts, Flexbox for 1D components

{{< faq "How does the fr unit work in CSS Grid?">}}The fr unit represents a fraction of the available space in the grid container. grid-template-columns: 1fr 2fr splits available space into 3 parts — second column gets 2/3, first gets 1/3. fr distributes space after fixed-size tracks (px, %) and gaps are accounted for.{{< /faq >}}

See full CSS tutorials for Responsive Design patterns.