Align the Track Collection

Content alignment distributes spare room around the grid as a whole.

Start

A

B

C

D

justify-content: start packs tracks at the inline start; align-content: start packs them at the block start.

Center

A

B

C

D

The fixed-size tracks move together to the center. Items still stretch inside those tracks by default.

Space between

A

B

C

D

space-between places spare room between the tracks. Content alignment has no visible effect when the tracks already fill the container.

Important HTML

A small grid shows spare space around tracks.

<div class="content-between">…</div>

Important CSS

justify-content and align-content move the track set.

.content-between {
  display: grid;
  justify-content: space-between;
  align-content: space-between;
}