Grid by Example

A collection of usage examples for the CSS Grid Layout specification.

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.

Back to list of examples