CSS 3 cheatsheet

CSS 3: Grid

5 common CSS 3 tasks.

Make equal columns

Three equal-width columns with a gap.

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

Make a responsive grid without media queries

Fit as many columns of at least 250px as the width allows.

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

Name layout areas

Describe the page layout with named areas.

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
.header { grid-area: header; }

Span multiple columns

Make an item cover two columns.

.wide {
  grid-column: span 2;
}

Center with grid

The shortest way to center a single child.

.parent {
  display: grid;
  place-items: center;
}