HTML & CSS · Quick Reference

Lesson 8 — CSS Grid Cheat Sheet

HTML & CSS

In one line: CSS Grid is the most powerful layout system in CSS. Unlike Flexbox (one-dimensional — a row or a column), Grid is two-dimensional — it controls both rows and columns at the same...

Key Ideas

1Grid Fundamentals. Like Flexbox, CSS Grid requires a container with display: grid. Its direct children become grid items that automatically place themselves into the defined rows and col...

2Rows, Columns & Gap. Define both axes explicitly with grid-template-columns and grid-template-rows. The gap property (or column-gap / row-gap separately) adds gutters between cells.

3Spanning Columns & Rows. Grid items can span multiple columns or rows. This is where Grid becomes magical — you can create magazine-style layouts where some items are larger than others.

4Named Grid Areas. Named grid areas are one of the most powerful CSS features ever made. You draw your layout as ASCII art in the CSS, then assign elements to areas by name. It's incredi...

5Responsive Grid: auto-fill & minmax(). One of Grid's killer features is creating responsive multi-column layouts without any media queries. The combination of repeat(auto-fill, minmax()) is a one-liner that...

Code Examples

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
  gap: 1rem;
}

/* Shorthand for 3 equal columns: */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* same as 1fr 1fr 1fr */
  gap: 1rem;
}

.layout {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;   /* sidebar + 2 equal cols */
  grid-template-rows: 80px 1fr 60px;      /* header, content, footer */
  gap: 1rem;                               /* gap between all cells */
  min-heigh...

/* Method 1: span keyword */
.feature-card { grid-column: span 2; }   /* spans 2 columns */
.tall-card     { grid-row: span 2; }      /* spans 2 rows */

/* Method 2: line numbers (1-indexed) */
.hero {
  grid-column: 1 / 4;  /* from line 1 to line 4 ...