Grid Alignment

Aligning the grid in a case where the number of tracks do not equal the size of the container.

Initial values:

The white area below is our grid container. It is 800x800 pixels. Our four column and four row track grid is in total 630x630 pixels including the gaps.

By default it appears top left of the container.

One
Two
Three
Four

Changing alignment of the grid

Chaning the values of align-content and justify-content to end we can move it to bottom right.

One
Two
Three
Four

space-between and space-around

We can use the keyword values space-between or space-around. These will increase the gaps between items.

One
Two
Three
Four

Centre the grid

The alignment properties make it easy to centre the grid.

One
Two
Three
Four