Grid by Example

Everything you need to learn CSS Grid Layout

No clearing required

If I add a footer to my markup and define a grid-area and place it on the grid using grid-template-areas you can see that it sits below the content column. There is no clearing required as this footer has a track on the grid, it can’t hop up into another track.

This example also shows the issue described in example 5, by default the background on the sidebar should stretch to full height, in a similar way to the defaults for Flexbox.

Read the specification | View example as full page

See the Pen Grid by Example 12: No clearing required by rachelandrew (@rachelandrew) on CodePen.