CSS Grid Item Order

The order property changes where an item visually appears without moving a single line of its HTML.

In this page:

What order Does
Default order Value
Reordering Without Editing HTML
The Accessibility Trap
When to Prefer Real HTML Reordering Instead

Syntax

css

item {
  order: integer;
}

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.

Note:

Accepted values:
order: <integer> — lower comes first, default 0
order: negative integer — moves an item before the others
note: source order and screen reader order stay unchanged
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Example: What order Does

css

<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.

Note:

Accepted values:
order: 0 — default for every item
order: -1 — moves before default items
order: 1 — moves after default items
source order — tie-breaker
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Example: Default order Value

css

<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.

Note:

Accepted values:
order: -1 — first
order: 1 — last
order: <integer> — any position
grid-row / grid-column — alternative explicit placement
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Example: Reordering Without Editing HTML

css

<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.

Note:

Accepted values:
order — changes visual order only
tab order — follows the DOM
screen readers — read in DOM order
reading-flow — an emerging property to keep focus order in sync

Example: The Accessibility Trap

css

<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.

Note:

Accepted values:
reorder the HTML — best for meaning
order — only for cosmetic changes
grid-template-areas — an alternative that also leaves DOM order untouched
note: keep DOM order logical

Example: When to Prefer Real HTML Reordering Instead

css

<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>

Live Example

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson CSS Grid Item Align Next Lesson → CSS 12-Column Grid Layout

CSS Grid Item Order

What order Does

Default order Value

Reordering Without Editing HTML

The Accessibility Trap

When to Prefer Real HTML Reordering Instead

Chapter Quiz — Complete all 10 topics to unlock

Login to run this code