| 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: Mon, 13 Oct 2025 03:57:28 GMT
etag: "80609fd0e16af059c8ceb7266c741ec3-ssl-df"
server: Netlify
strict-transport-security: max-age=31536000
vary: Accept-Encoding
x-nf-request-id: 01K7DVEMR3N1CW1F4981915EMP
Using Order
Using Order
Grid supports the order property also found in Flexbox. If you are explicitly positioning Grid Items then order will affect painting order, and therefore the order in which items stack up where no z-index has been applied.
If using auto-placement then the order property will affect how items are placed on the grid. In this example all boxes have been give an order of 1, so they continue to be positioned in DOM order. However box1 has an order of 3 and box2 an order of 2. These boxes have a higher order value so are positioned after all of the boxes with an order value of 1.
Read the specification | View example as full page
See the Pen Grid by Example 23: Auto-placement and the order property by rachelandrew (@rachelandrew) on CodePen.