CSS Grid Basics

Grid lays items out in rows and columns at the same time. It is ideal for card grids, galleries and whole-page layouts.

Syntax:

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

• 1fr means one fraction of the free space, so repeat(3, 1fr) gives three equal columns.
• gap sets the space between rows and columns.
• grid-template-columns: 200px 1fr gives a fixed sidebar and a flexible content area.

Responsive grid without media queries

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

Columns are at least 250px wide. The browser fits as many as it can and wraps the rest automatically.

Spanning cells

.featured {
  grid-column: span 2;  /* two columns wide */
  grid-row: span 2;     /* two rows tall */
}