| CARVIEW |
Select Language
HTTP/2 200
accept-ranges: bytes
age: 10206
cache-control: public,max-age=0,must-revalidate
cache-status: "Netlify Edge"; hit
content-encoding: gzip
content-type: text/html; charset=UTF-8
date: Sun, 12 Oct 2025 04:54:47 GMT
etag: "1d9cdde26a79e9d6733e1ff9a9c91309-ssl-df"
server: Netlify
strict-transport-security: max-age=31536000
vary: Accept-Encoding
x-nf-request-id: 01K7BCAW22BMTEPW4MP7YGZ62X
content-length: 1891
Line-based placement spanning tracks with the span keyword
Line-based placement spanning tracks with the span keyword
We can also span using the span keyword. This example creates the same layout as the one in example 5. I am using the span keyword rather than targeting the Grid Line by number. I am also using the defaults for row and column end, which is to span 1.
Read the specification | View example as full page
See the Pen Grid by Example 6: Line-based placement span keyword by rachelandrew (@rachelandrew) on CodePen.