Grid by Example

Everything you need to learn CSS Grid Layout

Grid auto-placement mixed with placed items

If a child element has been placed then the auto-placement algorithm will place that first and then work out what to do with any child elements that have not been placed.

In this example I have placed box2 on the grid and also made it span 3 grid lines. The rest of the boxes continue to lay out as before.

Read the specification | View example as full page

See the Pen Grid by Example 19: Auto-placement with a positioned element by rachelandrew (@rachelandrew) on CodePen.