| CARVIEW |
Select Language
HTTP/2 200
accept-ranges: bytes
age: 0
cache-control: public,max-age=0,must-revalidate
cache-status: "Netlify Edge"; fwd=miss
content-encoding: gzip
content-type: text/html; charset=UTF-8
date: Mon, 13 Oct 2025 05:11:34 GMT
etag: "904c5e1c83732d53ead76d06d0ab9cc3-ssl-df"
server: Netlify
strict-transport-security: max-age=31536000
vary: Accept-Encoding
x-nf-request-id: 01K7DZPAF29SESR8YDKD7EHHJG
No clearing required
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.