CSS Grid Layout: A Complete Guide

CSS Grid Basics

CSS Grid is a two-dimensional layout system for rows and columns simultaneously.

Defining a Grid

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

The fr Unit

fr represents a fraction of available space:

/* Three equal columns */
grid-template-columns: 1fr 1fr 1fr;
/* Same as */
grid-template-columns: repeat(3, 1fr);

Placing Items

.header { grid-column: 1 / -1; /* Span all columns */ }
.sidebar { grid-row: 2 / 4; /* Span 2 rows */ }
.main { grid-area: 2 / 2 / 4 / 4; /* row-start / col-start / row-end / col-end */ }

Named Grid Areas

.layout {
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
.header { grid-area: header; }

Auto-fill vs Auto-fit

/* auto-fill: creates as many columns as fit */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

/* auto-fit: collapses empty tracks */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

Try our CSS Grid Generator for visual building.