| CARVIEW |
Select Language
HTTP/2 200
accept-ranges: bytes
age: 1
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 20:59:11 GMT
etag: "24510219e07e230dcd5ce5db2a3bd473-ssl-df"
server: Netlify
strict-transport-security: max-age=31536000
vary: Accept-Encoding
x-nf-request-id: 01K7D3GQ499D78TE1XZWSZC1R8
Line-based placement spanning tracks
Line-based placement spanning tracks
To create Grid Areas that are larger than a single grid track we specify an end line that is more than one track away.
Here I am using the grid-column and grid-row shorthand and have omitted the end value for any items that span one row or column track.
Read the specification | View example as full page
See the Pen Grid by Example 5: Line-based placement spanning cells by rachelandrew (@rachelandrew) on CodePen.