CSS Grid Layout: A Complete Beginner's Guide with Examples

CSS Grid lays items out in two dimensions: rows and columns at the same time. Where Flexbox is best for a line of items, Grid is best for anything shaped like a table or a page layout: card galleries, dashboards and whole-page structures.

A first grid#

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.grid div { padding: 16px; background: #2f5fe0; color: white; border-radius: 6px; }

<div class="grid">
  <div>1</div><div>2</div><div>3</div>
  <div>4</div><div>5</div>
</div>

• display: grid makes a grid container; its direct children become grid items.
• grid-template-columns defines the columns. Items fill the cells in order, left to right, then wrap to the next row automatically.
• gap sets the space between rows and columns (row-gap and column-gap set them separately).

The fr unit#

fr means "one fraction of the free space". 1fr 2fr gives the second column twice the space of the first. You can mix units:

.grid { display: grid; grid-template-columns: 150px 1fr 2fr; gap: 8px; }
.grid div { padding: 12px; background: #e8590c; color: white; font: 13px monospace; }

<div class="grid"><div>150px</div><div>1fr</div><div>2fr</div></div>

repeat()#

repeat(count, size) avoids writing the same size many times:

grid-template-columns: repeat(4, 1fr);          /* 1fr 1fr 1fr 1fr */
grid-template-columns: 200px repeat(2, 1fr);    /* 200px 1fr 1fr */

Responsive grids without media queries#

This one line is one of the most useful in CSS:

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.gallery div { padding: 30px 0; text-align: center; background: #0f8a7e; color: white; border-radius: 6px; }

<div class="gallery">
  <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div><div>G</div>
</div>

• minmax(140px, 1fr): each column is at least 140px and at most an equal share.
• auto-fit: create as many columns as fit in the width.

Resize your browser window (or view this on a phone): the number of columns changes automatically.

auto-fill is similar, but keeps empty column tracks when there are too few items, while auto-fit collapses them so the items stretch.

Rows#

Rows are created automatically as items need them, sized to fit their content. You can size them yourself:

.grid {
  grid-template-rows: 80px auto 60px;   /* first three rows */
  grid-auto-rows: 120px;                /* any further, automatically created rows */
}

Spanning cells#

An item can span several columns or rows:

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.grid div { padding: 16px; background: #9b5de5; color: white; border-radius: 6px; }
.wide { grid-column: span 2; }
.tall { grid-row: span 2; }

<div class="grid">
  <div class="wide">span 2 columns</div>
  <div class="tall">span 2 rows</div>
  <div>3</div><div>4</div><div>5</div><div>6</div>
</div>

Placing items on exact lines and naming areas are covered in Grid Lines and Template Areas.

Alignment#

Grid uses the same alignment words as Flexbox:

By default, items stretch to fill their cells, which gives equal-height cards in each row.

Grid or Flexbox?#

They work well together: a Grid page layout whose header uses Flexbox, for example.

Practice#

.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.products article { padding: 12px; border: 1px solid #ddd; border-radius: 8px; }
.products .featured { grid-column: span 2; background: #fff8e1; }

<div class="products">
  <article class="featured"><h3>Featured: Laptop stand</h3><p>₹1,499</p></article>
  <article><h3>Mouse</h3><p>₹599</p></article>
  <article><h3>Keyboard</h3><p>₹1,299</p></article>
  <article><h3>Webcam</h3><p>₹2,199</p></article>
  <article><h3>Headset</h3><p>₹1,799</p></article>
</div>

Key takeaway#