CSS Grid Item Order
In this page:
What order Does
order accepts an integer and controls the visual painting order of grid (and flex) items -- items with a lower order value are drawn before items with a higher one, independent of their position in the HTML source.
Example: What order Does
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.a { order: 2; background: lightblue; padding: 8px; }
.b { order: 1; background: lightgreen; padding: 8px; }
</style>
<div class="container">
<div class="a">Coded first, painted second</div>
<div class="b">Coded second, painted first</div>
</div>Default order Value
Every item has an implicit order of 0 unless you set it explicitly, so setting order: -1 on one item moves it before all the untouched siblings, and order: 1 moves it after them.
Example: Default order Value
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.container div {
background: lightblue;
padding: 8px;
}
.first { order: -1; background: coral; }
</style>
<div class="container">
<div>Default order: 0</div>
<div class="first">order: -1, moves before</div>
</div>Reordering Without Editing HTML
order is commonly used to visually promote an item -- like moving a "featured" product card to the front -- without touching the underlying markup or its source order.
Example: Reordering Without Editing HTML
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.container div {
background: lightblue;
padding: 8px;
}
.featured { order: -1; background: coral; }
</style>
<div class="container">
<div>Product A</div>
<div class="featured">Featured product, visually promoted</div>
<div>Product B</div>
</div>The Accessibility Trap
Screen readers and keyboard tab order still follow the original HTML source order, not the visual order set to order -- so relying on order for meaningful content reordering can create a confusing mismatch between what users see and what assistive tech announces.
Example: The Accessibility Trap
<style>
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.container div {
background: lightblue;
padding: 8px;
}
.second { order: -1; background: coral; }
</style>
<div class="container">
<div>First in HTML source and tab order</div>
<div class="second">Painted first visually, but still second in tab order</div>
</div>When to Prefer Real HTML Reordering Instead
For any reordering that changes actual reading/interaction sequence (not just decorative visual tweaks), moving the element in the HTML itself is the more accessible choice than reaching for order.
Example: When to Prefer Real HTML Reordering Instead
<style>
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.container div {
background: lightblue;
padding: 8px;
}
</style>
<div class="container">
<div>Moved here in the actual HTML, matching both visual and reading order</div>
<div>Second item</div>
</div>Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: