What is CSS Grid?

CSS Grid is a two-dimensional layout system that lets you control both rows and columns at the same time. While Flexbox is great for one-dimensional layouts, Grid excels when you need to place items in a structured grid pattern.

Creating a Grid Container

To use Grid, set `display: grid` on the parent element. Then define your columns and rows.

CSS

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

.grid-item {
  background-color: #3498db;
  color: white;
  padding: 20px;
  border-radius: 8px;
}

HTML

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
  <div class="grid-item">Item 5</div>
  <div class="grid-item">Item 6</div>
</div>

This creates a 3-column grid where each column is 200px wide with 20px gaps between items.

The fr Unit

The `fr` unit represents a fraction of the available space. It is the most useful unit for Grid layouts.

CSS

/* Three equal columns */
.equal-columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

/* Sidebar + main content */
.sidebar-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 30px;
}

/* Sidebar + main + aside */
.three-column {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  gap: 20px;
}

/* Unequal distribution */
.weighted {
  display: grid;
  grid-template-columns: 2fr 1fr;  /* First column gets 2/3, second gets 1/3 */
  gap: 20px;
}

The repeat() Function

The `repeat()` function saves you from writing the same value multiple times.

CSS

/* Instead of: 1fr 1fr 1fr 1fr */
.four-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Mixed values */
.mixed {
  display: grid;
  grid-template-columns: 200px repeat(3, 1fr);
  gap: 20px;
}

/* Repeating patterns */
.pattern {
  display: grid;
  grid-template-columns: repeat(3, 1fr 2fr);
  gap: 10px;
}

Grid Template Rows

You can also define row heights explicitly.

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 200px 100px;
  gap: 20px;
}

/* Auto rows for content-based height */
.auto-rows {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(150px, auto);
  gap: 20px;
}

The `minmax()` function sets a minimum and maximum size. `minmax(150px, auto)` means each row is at least 150px tall but can grow to fit its content.

Placing Items on the Grid

You can control exactly where items are placed using line numbers.

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 200px);
  gap: 15px;
}

/* Span across columns */
.header {
  grid-column: 1 / 5;      /* Start at line 1, end at line 5 (all 4 columns) */
}

/* Shorthand with span */
.featured {
  grid-column: span 2;     /* Span across 2 columns */
  grid-row: span 2;        /* Span across 2 rows */
}

/* Specific placement */
.sidebar {
  grid-column: 4 / 5;      /* Last column */
  grid-row: 2 / 4;         /* Row 2 to row 3 */
}

Grid Template Areas

Grid areas let you name sections of your grid and place items using those names. This is one of the most readable ways to define layouts.

CSS

.page-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr 50px;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
  min-height: 100vh;
  gap: 0;
}

.header  { grid-area: header;  background: #2c3e50; color: white; padding: 15px; }
.sidebar { grid-area: sidebar; background: #ecf0f1; padding: 20px; }
.content { grid-area: content; padding: 20px; }
.footer  { grid-area: footer;  background: #2c3e50; color: white; padding: 15px; }

HTML

<div class="page-layout">
  <header class="header">Header</header>
  <nav class="sidebar">Sidebar</nav>
  <main class="content">Main Content</main>
  <footer class="footer">Footer</footer>
</div>

Alignment in Grid

Justify Items (Horizontal Alignment)

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  justify-items: start;     /* Align items to left within their cell */
  justify-items: center;    /* Center items horizontally in their cell */
  justify-items: end;       /* Align items to right within their cell */
  justify-items: stretch;   /* Default: stretch to fill cell width */
}

Align Items (Vertical Alignment)

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 200px);
  align-items: start;       /* Align items to top of their cell */
  align-items: center;      /* Center items vertically in their cell */
  align-items: end;         /* Align items to bottom of their cell */
  align-items: stretch;     /* Default: stretch to fill cell height */
}

Justify Content and Align Content

These properties align the entire grid within its container when the grid is smaller than the container.

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  height: 100vh;
  justify-content: center;  /* Center the grid horizontally */
  align-content: center;    /* Center the grid vertically */
}

Responsive Grid with auto-fit and auto-fill

The `auto-fit` and `auto-fill` keywords create responsive grids without media queries.

CSS

/* Responsive card grid - cards are at least 300px, fill available space */
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

/* auto-fill: creates empty columns if space allows */
.auto-fill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

auto-fit collapses empty tracks and stretches items to fill the space. auto-fill keeps empty tracks, leaving gaps. For most responsive layouts, auto-fit is what you want.

Practical Grid Layouts

Photo Gallery

CSS

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

.gallery img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 8px;
}

Dashboard Layout

CSS

.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(120px, auto);
  gap: 20px;
  padding: 20px;
}

.widget-large {
  grid-column: span 2;
  grid-row: span 2;
}

.widget-wide {
  grid-column: span 2;
}

Grid vs Flexbox

Use Grid when:

You need to control both rows and columns
You have a defined overall page layout
You want items to align in a strict grid pattern

Use Flexbox when:

You are working in one direction (row or column)
You want items to distribute space flexibly
You are building components like navbars, card rows, or toolbars

In practice, you will often use both together: Grid for the overall page layout and Flexbox for components within the grid cells.

Summary

CSS Grid is a powerful two-dimensional layout system. Use `grid-template-columns` and `grid-template-rows` to define your grid structure, `fr` units for flexible sizing, `grid-template-areas` for readable named layouts, and `auto-fit` with `minmax()` for responsive grids without media queries. Combined with Flexbox, you have all the tools needed for any modern web layout.

In the next section, you will learn about CSS Typography.