| 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 23:00:56 GMT
etag: "d66bf353be176c44798a8b1f63403abf-ssl-df"
server: Netlify
strict-transport-security: max-age=31536000
vary: Accept-Encoding
x-nf-request-id: 01K7DAFN3QSKAC0K64B8X97AMP
Line-based placement shorthand - grid-area
Line-based placement shorthand - grid-area
We can achieve the same result as in example 2 and 3 declaring all four values with the grid-area property. Again values are separated with a /. The order of the values is row-start/column-start/row-end/column-end.
Read the specification | View example as full page
See the Pen Grid by Example 4: Line-based placement shorthand grid-area by rachelandrew (@rachelandrew) on CodePen.