CSS Grid Alignment

Grid has the same alignment ideas as flexbox, but works in both directions.

Aligning items inside their cells

The default is stretch: items fill their cell.

1
2
3
4
5
6
7
8
9
10

<style>
  .grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 70px; gap: 6px; margin-bottom: 8px; }
  .grid > div { background: #d94a00; color: #fff; padding: 6px; }
  .c { place-items: center; }
  .s { justify-items: start; align-items: end; }
</style>
<p>place-items: center</p>
<div class="grid c"><div>A</div><div>B</div><div>C</div></div>
<p>justify-items: start; align-items: end</p>
<div class="grid s"><div>A</div><div>B</div><div>C</div></div>

Centering one thing, the shortest way

1

.center { display: grid; place-items: center; min-height: 200px; }

Two lines of CSS and a child is centered both ways. It is the shortest centering recipe.

Moving the whole grid

When the tracks add up to less than the container, justify-content and align-content position the grid as a whole, using the same values as in flexbox (center, space-between, end, and so on).

1

.grid { grid-template-columns: repeat(3, 100px); justify-content: center; }

The three 100px columns sit in the middle of the container.