Setarea ordinii vizuale a elementelor grid
Proprietatea CSS order vă permite să schimbați ordinea vizuală a elementelor grid.
Primul element grid din codul dvs. HTML nu trebuie să apară neapărat ca primul element în grilă. Puteți rearanja elementele vizual fără a modifica HTML-ul.
Notă de accesibilitate: Proprietatea order schimbă doar ordinea vizuală. Ea nu modifică ordinea logică a elementelor din DOM. Aceasta înseamnă că cititoarele de ecran și alte tehnologii asistive vor citi în continuare conținutul în ordinea sa originală din HTML, care poate diferi de ceea ce este afișat pe ecran.
Exemplu
Folosiți proprietatea order pentru a seta o ordine vizuală personalizată pentru fiecare element grid:
Prompt
Creați un layout CSS Grid cu șase elemente grid. Folosiți proprietatea
order pentru a le rearanja ordinea vizuală diferit de ordinea din sursă: item1 order 3, item2 order 6, item3 order 1, item4 order 2, item5 order 4, item6 order 5. Stilizați fiecare element cu o culoare de fundal și padding astfel încât reordonarea să fie clar vizibilă.
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>