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 one fraction of the available space, so they are equal. If the container is 900px wide, each column gets 300px.

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 by 3 grid with specific row heights.

Auto Rows

Often you do not know how many rows you will 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;
}

Practical Example

Here is 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 clean 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;
}

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