Grid by Example

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

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.

Back to list of examples