Lesson 2: Rows, Columns & Gap

Defining Columns

The grid-template-columns property defines how many columns your grid has and how wide each column should be.

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

This creates three columns, each exactly 200px wide.

Better: Using FR Units

The fr unit (short for "fraction") is Grid's superpower. It divides available space proportionally.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

This creates three columns that each take up 1 fraction of the available space (so they're equal). If the container is 900px wide, each column gets 300px.

💡 Pro Tip:

You can mix units! grid-template-columns: 200px 1fr 2fr; creates a 200px fixed column, then divides the remaining space into thirds (1 part and 2 parts).

Defining Rows

The grid-template-rows property works exactly like columns, but for rows.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 200px 100px;
}

This creates a 3×3 grid with specific row heights.

Auto Rows

Often you don't know how many rows you'll need. Use auto to let rows size themselves based on content:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
}

The Gap Property

The gap property adds spacing between grid items (like gutters). This is much easier than using margins!

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

This adds 20px of space between all grid items (both rows and columns).

Different Row and Column Gaps

You can set different gaps for rows and columns:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  row-gap: 30px;
  column-gap: 20px;
}

✅ Best Practice:

Use gap instead of the old grid-gap property. The modern gap property works in Grid, Flexbox, and multi-column layouts.

Practical Example

Here's a common card grid layout:

.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}

.card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

This creates a beautiful 3-column card layout with 24px spacing between cards.

Common Patterns

Two-Column Layout (Sidebar + Content)

grid-template-columns: 250px 1fr;

Fixed 250px sidebar, flexible content area.

Three Equal Columns

grid-template-columns: 1fr 1fr 1fr;

Or use the shorthand: repeat(3, 1fr)

Holy Grail Layout (3 columns, content larger)

grid-template-columns: 200px 1fr 200px;

Two fixed sidebars, flexible center content.

What About Spacing?

Gap adds space between items, but NOT on the outer edges. If you want outer spacing too, use padding on the container:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  padding: 20px;  /* Adds space around the edges */
}

Quick Reference

grid-template-columns - Defines column widths
grid-template-rows - Defines row heights
gap - Space between items (both directions)
row-gap - Space between rows only
column-gap - Space between columns only
fr - Flexible fraction unit
repeat(3, 1fr) - Shorthand for repeating values

📚 Lesson 2: Rows, Columns & Gap