CSS Grid

Grid Intro

CSS Grid is a two-dimensional layout system: it controls rows and columns at the same time. Where flexbox arranges items along a single line, Grid divides an area into a matrix of tracks and lets you place items precisely into cells. It is the most powerful layout tool in CSS.

What is CSS Grid?

Grid lets you define a grid of columns and rows on a container, then place children into the resulting cells. Because it works in two dimensions at once, it is ideal for whole-page layouts, photo galleries, dashboards and any design where content lines up both horizontally and vertically.

You create a grid by setting display:grid on a container and describing its columns (and optionally rows) with grid-template-columns and grid-template-rows.

The Vocabulary of Grid

Term	Meaning
Grid container	The element with display:grid
Grid item	A direct child of the grid container
Grid track	A single row or a single column
Grid cell	The intersection of one row and one column
Grid line	The dividing lines between tracks, numbered from 1
Gap (gutter)	The space between tracks, set with gap

Your First Grid

The example below creates three equal columns using grid-template-columns and 1fr units. The fr unit means one fraction of the available space. Six items flow into the cells automatically, wrapping to new rows as needed.

A simple three-column grid — click Run

Example

<!DOCTYPE html>
<html>
<head>
<style>
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* three equal columns */
    gap: 12px;
    padding: 12px;
    background: #e2e8f0;
    font-family: sans-serif;
  }
  .cell {
    background: #6366f1;
    color: #fff;
    padding: 26px;
    border-radius: 6px;
    text-align: center;
    font-weight: 700;
  }
  .cell:nth-child(even) { background: #ec4899; }
</style>
</head>
<body>
  <div class="grid">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
  </div>
</body>
</html>

💡

The fr unit is grid's superpower. grid-template-columns: 1fr 1fr 1fr means three equal columns; 2fr 1fr means the first column is twice as wide as the second.

Rows and Gaps

You can also define row heights with grid-template-rows, and control spacing between all tracks with gap (or the longhands row-gap and column-gap). The example makes two rows of differing height and a visible gap.

Explicit rows with different heights and a gap

Example

<!DOCTYPE html>
<html>
<head>
<style>
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 80px 140px; /* two rows, different heights */
    gap: 14px;
    padding: 14px;
    background: #f1f5f9;
    font-family: sans-serif;
  }
  .cell {
    background: #14b8a6;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-weight: 700;
  }
  .cell:nth-child(odd) { background: #0891b2; }
</style>
</head>
<body>
  <div class="grid">
    <div class="cell">A</div>
    <div class="cell">B</div>
    <div class="cell">C</div>
    <div class="cell">D</div>
  </div>
</body>
</html>

Grid vs Flexbox

Grid is two-dimensional: it handles rows and columns together.
Flexbox is one-dimensional: it handles a single row or column.
Grid is layout-first: you define the structure, then place content into it.
Flexbox is content-first: item sizes drive the layout.
Use Grid for page structure and galleries; use Flexbox for components inside them.

ℹ️

You do not have to choose one forever. A grid item can itself be display:flex, mixing both models on the same page.

Key Points

CSS Grid is a two-dimensional layout system of rows and columns.
display:grid creates the container; direct children become grid items.
grid-template-columns and grid-template-rows define the tracks.
The fr unit distributes available space in fractions.
gap sets the space between rows and columns cleanly.