Set the Visual Order of the Grid Items
The CSS order property lets you change the visual order of grid items.
The first grid item in your HTML code does not have to appear as the first item in the grid. You can rearrange items visually without changing the HTML.
Accessibility note: The order property only changes the visual order. It does not change the logical order of elements in the DOM. This means screen readers and other assistive technologies will still read the content in its original HTML order, which may differ from what is shown on screen.
Example
Use the order property to set a custom visual order for each grid item:
Prompt
Create a CSS Grid layout with six grid items. Use the
order property to rearrange their visual order differently from their source order: item1 order 3, item2 order 6, item3 order 1, item4 order 2, item5 order 4, item6 order 5. Style each item with a background color and padding so the reordering is clearly visible.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Item Order</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
padding: 10px;
background-color: #2196F3;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
.item1 { order: 3; }
.item2 { order: 6; }
.item3 { order: 1; }
.item4 { order: 2; }
.item5 { order: 4; }
.item6 { order: 5; }
</style>
</head>
<body>
<h1>CSS Grid Item Order</h1>
<p>Use the <code>order</code> property to change the visual order of grid items:</p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
</body>
</html>