Настройка визуального порядка элементов сетки
Свойство CSS order позволяет изменять визуальный порядок элементов сетки.
Первый grid-элемент в вашем HTML-коде не обязательно должен отображаться как первый элемент в сетке. Вы можете переставлять элементы визуально, не изменяя HTML.
Примечание о доступности: Свойство order изменяет только визуальный порядок. Оно не меняет логический порядок элементов в DOM. Это означает, что программы чтения с экрана и другие вспомогательные технологии по-прежнему будут читать содержимое в его исходном порядке HTML, который может отличаться от того, что отображается на экране.
Пример
Используйте свойство order, чтобы задать собственный визуальный порядок для каждого элемента сетки:
Prompt
Создайте макет CSS Grid с шестью grid-элементами. Используйте свойство
order, чтобы изменить их визуальный порядок относительно порядка в исходном коде: item1 order 3, item2 order 6, item3 order 1, item4 order 2, item5 order 4, item6 order 5. Оформите каждый элемент цветом фона и отступами, чтобы изменение порядка было хорошо заметно.
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>