| 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: Sun, 12 Oct 2025 04:31:01 GMT
etag: "7b3791dda801c16a15d6eb59c6600150-ssl-df"
server: Netlify
strict-transport-security: max-age=31536000
vary: Accept-Encoding
x-nf-request-id: 01K7BAZBCJWGWV5B4FDTTYPZ7T
Defining Grid Areas
Defining Grid Areas
We can create named areas on the grid to put content into. To do this we first assign elements in our markup to a Grid Area, using the grid-area property.
We can then use the grid-template-areas property to describe where on the Grid these elements should sit.
Repeating the name of an area indicates that the area spans that grid track. Using a . or a sequence like .... indicates an empty track. Such as the very first cell on this grid.
Read the specification | View example as full page
See the Pen Grid by Example 11: Defining Grid Areas by rachelandrew (@rachelandrew) on CodePen.