Grid centering & layout

Centering a single child

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

place-items is shorthand for align-items + justify-items.

Defining columns

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

repeat(3, 1fr) creates three equal-width columns. gap adds spacing without margin hacks.

Responsive grids without media queries

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

Columns wrap automatically as the container shrinks — each item is at least 220px wide, and they share leftover space equally.

Placing an item explicitly

.item {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}

Browser support

✅ Chrome ✅ Firefox ✅ Safari ✅ Edge — grid has been fully supported everywhere since 2017.