If you create a grid on an element all the child elements immediately become grid items, and will lay themselves out on your defined grid according to the auto-placemnt rules.
By default items will lay out one into each cell of the grid, howver you can also cause items to span multiple tracks and mix auto-placed items with positioned items.
In this video I take a look at how these auto-placement rules work. You can find the demo shown in this video on CodePen.
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.