How to Use CSS Grid

What You’ll Build or Solve

You’ll create structured layouts using display: grid, define rows and columns, and control placement and spacing.

When This Approach Works Best

This approach works best when you:

• Build full-page layouts with header, sidebar, and content areas
• Create gallery or card grids with consistent spacing
• Align elements across both rows and columns
• Design dashboards with structured panels

Avoid Grid when you only need simple one-dimensional alignment. Flexbox handles rows or columns better when the layout complexity is low.

Prerequisites

• A basic HTML file
• A linked CSS file or <style> block
• Familiarity with div elements and CSS selectors

Example structure used in this guide:

<divclass="container">
<divclass="item">A</div>
<divclass="item">B</div>
<divclass="item">C</div>
<divclass="item">D</div>
</div>

Step-by-Step Instructions

Step 1: Turn a Container into a Grid

Start by applying display: grid to the parent element.

.container {
  display:grid;
}

By default, items stack vertically until you define columns.

Step 2: Define Columns and Rows

Use grid-template-columns to create column structure.

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

This creates three fixed-width columns.

For flexible columns:

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

fr means fractional unit. Each column shares available space evenly.

You can also mix values:

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

Rows are defined similarly:

grid-template-rows: 100px 200px;

If you do not define rows, Grid creates them automatically based on content.

Step 3: Add Spacing Between Items

Use gap to create consistent spacing.

.container {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
}

gap replaces manual margins and keeps spacing consistent.

Step 4: Control Item Placement

You can manually place items using column and row lines.

.item:first-child {
  grid-column:1/3;
}

This makes the first item span across two columns.

You can also span rows:

.item:first-child {
  grid-row:1/3;
}

What to look for:

• Grid lines start at 1
• grid-column: 1 / 3 spans two columns
• Spanning works only within defined grid tracks

Step 5: Use repeat() and auto-fit for Responsive Layouts

Instead of fixed columns, use repeat().

.container {
  display:grid;
  grid-template-columns:repeat(3,1fr);
}

For responsive layouts:

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

This creates as many columns as fit, each at least 200px wide.

Use this pattern for card layouts that adapt to screen width.

Examples You Can Copy

Example 1: Simple Three-Column Layout

<divclass="grid">
<divclass="box">One</div>
<divclass="box">Two</div>
<divclass="box">Three</div>
</div>

.grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
}

Example 2: Page Layout with Header and Sidebar

<divclass="layout">
<header>Header</header>
<aside>Sidebar</aside>
<main>Content</main>
</div>

.layout {
  display:grid;
  grid-template-columns:200px1fr;
  grid-template-rows:100px1fr;
  gap:1rem;
}

header {
  grid-column:1/3;
}

The header spans both columns.

Example 3: Responsive Card Grid

<divclass="cards">
<divclass="card">A</div>
<divclass="card">B</div>
<divclass="card">C</div>
<divclass="card">D</div>
</div>

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

Cards wrap automatically as the screen size changes.

Example 4: Dashboard Panel Layout

<divclass="dashboard">
<divclass="panel large">Stats</div>
<divclass="panel">Chart</div>
<divclass="panel">Activity</div>
</div>

.dashboard {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
}

.large {
  grid-column:1/4;
}

The large panel spans the full width.

Common Mistakes and How to Fix Them

Mistake 1: Forgetting display: grid

What you might do:

.container {
  grid-template-columns:1fr1fr;
}

Why it breaks:

Grid properties only work when the container uses display: grid.

Correct approach:

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

Mistake 2: Confusing fr with Percentages

What you might do:

grid-template-columns: 50% 50%;

Expecting flexible resizing like fr.

Why it breaks:

Percentages depend on container width and can cause overflow when combined with gap.

Correct approach:

grid-template-columns: 1fr 1fr;

fr distributes remaining space automatically.

Troubleshooting

If items stack vertically, confirm you defined grid-template-columns.

If spacing looks inconsistent, check gap and child margins.

If spanning does not work, confirm grid lines exist within defined columns.

If layout breaks on mobile, review fixed column widths and consider auto-fit with minmax.

If styles do not apply, confirm your CSS file is linked correctly.

Quick Recap

• Apply display: grid to the parent
• Define columns with grid-template-columns
• Use gap for spacing
• Span items using grid-column or grid-row
• Use auto-fit and minmax for responsive layouts