How to use order in grid in css

CssHow-ToBeginner · 3 min read

How to Use Order in CSS Grid to Rearrange Items

In CSS Grid, you can use the order property on grid items to change their visual order without altering the HTML. Items with lower order values appear first, and items with higher values appear later in the grid layout.

📐

Syntax

The order property accepts an integer value that determines the position of a grid item within the grid container. The default value is 0. Items with smaller order values appear before items with larger values.

order: 0; — default order
order: 1; — appears after items with order 0
order: -1; — appears before items with order 0

css

.grid-item {
  order: <integer>;
}

💻

Example

This example shows a grid with three items. The second item is visually moved to appear last by setting its order to 2. The first and third items keep the default order 0.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CSS Grid Order Example</title>
<style>
  .grid-container {
    display: flex;
    gap: 10px;
  }
  .grid-item {
    background-color: #4CAF50;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100px;
    font-size: 1.5rem;
    border-radius: 8px;
  }
  .item2 {
    order: 2;
  }
</style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item item1">1</div>
    <div class="grid-item item2">2</div>
    <div class="grid-item item3">3</div>
  </div>
</body>
</html>

Output

A horizontal row of three green boxes labeled 1, 3, 2 from left to right, with the second box visually moved to the last position.

⚠️

Common Pitfalls

One common mistake is expecting order to change the HTML source order or affect keyboard navigation. It only changes visual order, so screen readers and tab order follow the original HTML. Also, order works on flex and grid items but has no effect on block elements outside these layouts.

Another pitfall is using large or negative order values without a clear plan, which can make the layout confusing.

css

.item1 {
  order: 10; /* Too large, may confuse layout */
}
.item2 {
  order: -5; /* Negative order to appear first */
}

/* Correct approach: use small integers and keep order values simple */

📊

Quick Reference

Default order: 0
Lower order: appears earlier
Higher order: appears later
Negative order: appears before default
Only affects visual order: HTML and accessibility order stay the same

✅

Key Takeaways

Use the CSS order property on grid items to change their visual position without changing HTML.

Items with lower order values appear before those with higher values.

order only affects visual layout, not keyboard or screen reader order.

Keep order values simple and small to avoid confusion.

The default order value is 0; negative values place items earlier.