Grid by Example

A collection of usage examples for the CSS Grid Layout specification.

Day 12: Aligning the grid

Dec 12, 2016

Yesterday we took a look at aligning the grid items. You can also align the tracks of the grid - assuming that you have a grid container that is larger in one or both dimensions than the size of the tracks.

Using alignment in this way can cause unexpected results. For example, if you use the space-between or space-around values, any grid-gap you have set is going to get larger as the tracks space out. Once you understand the behaviour however, it’s just another way of controlling your grid.

I demonstrate how aligning grid tracks work in this video from my video tutorial series.

What is this?

I’m sharing some tips to help you learn Grid Layout from the 1st of December until Christmas. Edited highlights from the things on this site and that I’ve posted elsewhere. Follow along!

If you find this style of learning useful then you might enjoy my online CSS Layout Workshop. I’m also available for in-house training, workshops and consultancy or conference speaking.

Back to Blog listing