Direcția și ordinea elementelor

Proprietatea grid-auto-flow

Implicit, toate elementele sunt dispuse în ordine pe orizontală; dacă nu mai este loc pe rând, elementele sunt mutate pe rândul următor. Dar folosind proprietatea grid-auto-flow, putem schimba direcția elementelor. Această proprietate acceptă două valori:

row: valoare implicită, elementele sunt dispuse în rând unul după altul; dacă nu mai este loc pe rând, elementele sunt mutate pe rândul următor
column: elementele sunt dispuse în coloană; dacă nu mai este loc pe coloană, elementele sunt mutate în coloana următoare

Aplicăm această proprietate:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width" />
       <title>Grid Layout în CSS3</title>
       <style>
           * {
               box-sizing: border-box;
           }
           html, body {
               margin: 0;
               padding: 0;
           }
           .grid-container {
               height: 100vh;
               display: grid;
               grid-template-columns: repeat(3, 1fr);
               grid-template-rows: repeat(3, 1fr);
               grid-auto-flow: row;
           }
           .grid-item {
               text-align: center;
               font-size: 1.1em;
               padding: 1.5em;
               color: white;
           }
           .color1 {background-color: #675BA7;}
           .color2 {background-color: #9BC850;}
           .color3 {background-color: #A62E5C;}
           .color4 {background-color: #2A9FBC;}
           .color5 {background-color: #4e342e;}
       </style>
   </head>
   <body>
       <div class="grid-container">
           <div class="grid-item color1">Grid Item 1</div>
           <div class="grid-item color2">Grid Item 2</div>
           <div class="grid-item color3">Grid Item 3</div>
           <div class="grid-item color4">Grid Item 4</div>
           <div class="grid-item color1">Grid Item 5</div>
           <div class="grid-item color4">Grid Item 6</div>
           <div class="grid-item color5">Grid Item 7</div>
       </div>
   </body>
</html>

Proprietatea grid-auto-flow are valoarea row, astfel încât elementele vor fi dispuse în rânduri.

Acum schimbăm stilul containerului grid:

.grid-container {
   height: 100vh;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(3, 1fr);
   grid-auto-flow: column;
}

După aceasta, elementele vor fi dispuse în coloane.

Proprietatea order

Proprietatea order permite setarea ordinii elementelor. Implicit, pentru fiecare element în grid această proprietate are valoarea 0. Prin urmare, elementele sunt dispuse în ordinea în care sunt definite în marcajul HTML. Dar putem redefini această ordine:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width" />
       <title>Grid Layout în CSS3</title>
       <style>
           * {
               box-sizing: border-box;
           }
           html, body {
               margin: 0;
               padding: 0;
           }
           .grid-container {
               height: 100vh;
               display: grid;
               grid-template-columns: repeat(3, 1fr);
               grid-template-rows: repeat(3, 1fr);
           }
           .grid-item {
               text-align: center;
               font-size: 1.1em;
               padding: 1.5em;
               color: white;
           }
           .last-item {
               order: 1;
           }
           .first-item {
               order: -1;
           }
           .color1 {background-color: #675BA7;}
           .color2 {background-color: #9BC850;}
           .color3 {background-color: #A62E5C;}
           .color4 {background-color: #2A9FBC;}
           .color5 {background-color: #4e342e;}
       </style>
   </head>
   <body>
       <div class="grid-container">
           <div class="grid-item color1">Grid Item 1</div>
           <div class="grid-item color2 last-item">Grid Item 2</div>
           <div class="grid-item color3 last-item">Grid Item 3</div>
           <div class="grid-item color4">Grid Item 4</div>
           <div class="grid-item color1">Grid Item 5</div>
           <div class="grid-item color4">Grid Item 6</div>
           <div class="grid-item color5 first-item">Grid Item 7</div>
       </div>
   </body>
</html>

Elementele cu clasa last-item au ordinea 1, deci vor fi dispuse după alte elemente cu ordinea 0 sau mai mică.

Dacă este necesar să plasăm anumite elemente înaintea altora, putem folosi o valoare negativă pentru proprietatea order. Astfel, al șaptelea element are ordinea -1, ceea ce este mai mic decât ordinea celorlalte elemente. Prin urmare, ultimul element din marcaj va fi plasat înaintea tuturor celorlalte elemente.