Grid Alignment

Aligning items within their grid areas.

Initial values:

• Block Axis align-items: stretch
• Row Axis justify-items: stretch

I have added a background image to the grid container in order that we can see the defined areas.

Aligning on the Block Axis

By changing the value of align-items we align all items inside the grid areas defined.

We can also add a property of align-self on any individual child, to give it different alignment. In this example align-items is set to center. Item 2 to stretch.

Aligning on the Row Axis

By changing the value of justify-items we align all items inside the grid areas defined.

We can also add a property of justify-self on any individual child, to give it different justify value. In this example justify-items is set to center. Item 2 to stretch.