Grid by Example

Everything you need to learn CSS Grid Layout

Grid auto-placement

If you declare a Grid on an element and do not position the child elements then the auto-placememt algorithm dictates what the browser should do about those unplaced grid items.

In this example I have a set of 12 boxes. I’ve used nth-child to switch the background color on the even boxes to make this example clear. I have declared a Grid and created rows and columns but not positioned any of the children. As you can see the boxes all lay out on the Grid despite having no placement assigned to them.

Read the specification | View example as full page

See the Pen Grid by Example 17: Grid Auto-placement by rachelandrew (@rachelandrew) on CodePen.