| 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: Mon, 13 Oct 2025 01:27:49 GMT
etag: "e722197e42b497b137db782e97ab52a6-ssl-df"
server: Netlify
strict-transport-security: max-age=31536000
vary: Accept-Encoding
x-nf-request-id: 01K7DJWKBP13H085ZS9YVVRB3H
Line-based placement named lines with spans
Line-based placement named lines with spans
You can give lines the same name and then use the span keyword to target lines of a certain name. This is really useful if you want to create a complex grid with multiple content tracks and gutters.
I have made a slightly larger grid here and have named all of the Grid Lines before the content tracks with col and all of the lines before the row tracks with row. I can then start at a certain column line by using col <line number> and span by saying span <number of lines>.
Read the specification | View example as full page
See the Pen Grid by Example 8: Line-based placement named lines with span by rachelandrew (@rachelandrew) on CodePen.