grid — 2D layouts

display: grid creates a 2D grid. grid-template-columns defines columns. The most powerful CSS layout.

style.css v3.1

style.css — the CSS rules

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  background: #f5f5f5;
  padding: 20px;
}
.box {
  background: #a0c000;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 6px;
}

index.html — the HTML structure (what the CSS targets)

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>

Live preview updates as you type

🧠 How it works

grid-template-columns defines the column tracks. 1fr 1fr 1fr = 3 equal columns (fr = fraction of available space). 200px 1fr = fixed 200px first column, flexible second. repeat(3, 1fr) = same as 1fr 1fr 1fr. repeat(auto-fit, minmax(150px, 1fr)) = responsive! As many columns as fit, each at least 150px. gap: space between rows AND columns. grid-template-rows: same syntax for rows.

✏️ Try these changes

Change 1fr 1fr 1fr to 1fr 2fr 1fr
→ middle column is twice as wide
Change to 200px 1fr
→ first column fixed 200px, second takes the rest
Change to repeat(2, 1fr)
→ 2 columns instead of 3 — items wrap to 3 rows
Change to repeat(auto-fit, minmax(120px, 1fr))
→ responsive! resize your browser to see columns adjust
Change gap: 10px to gap: 20px 5px
→ 20px row gap, 5px column gap

← Previous lab

flexbox — the modern layout system

Next lab →

transition — smooth animations