Rânduri și coloane

Grid formează o rețea de rânduri și coloane, la intersecția cărora se formează celule. Pentru a seta rânduri și coloane în Grid Layout, se folosesc următoarele proprietăți CSS3:

grid-template-columns: configurează coloanele
grid-template-rows: configurează rândurile

Coloane

Pentru a defini coloanele, utilizăm la containerul grid proprietatea de stil grid-template-columns. De exemplu, să definim un grid cu două coloane:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width" />
       <title>Grid Layout în CSS3</title>
       <style>
           .grid-container {
               border: solid 2px #000;
               display: grid;
               grid-template-columns: 8em 8em;
           }
           .grid-item {
               box-sizing: border-box;
               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;}
       </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>
   </body>
</html>

Ca valoare, proprietatea grid-template-columns primește lățimea coloanelor. Câte coloane dorim să avem în grid, atâtea valori trebuie să transmitem acestei proprietăți. Astfel, în exemplul de mai sus, gridul conține două coloane, așadar proprietatea primește două valori care indică lățimea coloanelor:

Dacă dorim să avem trei coloane în grid, trebuie să transmitem trei valori, de exemplu:

grid-template-columns: 8em 7em 8em;

Dacă sunt mai multe coloane decât elemente, se vor crea automat noi rânduri pentru a le acomoda.

Rânduri

Setarea rândurilor este foarte asemănătoare cu setarea coloanelor. Pentru aceasta, la containerul grid trebuie să setăm proprietatea grid-template-rows, care definește numărul și dimensiunile rândurilor:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width" />
       <title>Grid Layout în CSS3</title>
       <style>
           .grid-container {
               border: solid 2px #000;
               display: grid;
               grid-template-rows: 4em 5em;
           }
           .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;}
       </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 color3">Grid Item 7</div>
       </div>
   </body>
</html>

Proprietatea grid-template-rows primește înălțimea fiecărui rând. În acest caz, înălțimea primului rând este de 4em, iar a celui de-al doilea de 5em.

În același timp, dacă sunt mai multe elemente decât celulele gridului, se vor crea rânduri suplimentare (la fel ca în cazul coloanelor). Prin urmare, deși mai sus au fost definite setările doar pentru două rânduri, în realitate gridul va avea trei rânduri și, după cum se vede în imagine, înălțimea celui de-al treilea rând nu va fi neapărat de 5em, ea va fi calculată automat.

Să modificăm stilurile containerului grid, adăugând încă două rânduri:

.grid-container {
   border: solid 2px #000;
   display: grid;
   grid-template-columns: 8em 8em 8em;
   grid-template-rows: 5em 5em 5em 5em;
}

Aici sunt definite trei coloane și patru rânduri:

Și deoarece celulele gridului sunt mai multe decât elementele, ultima linie rămâne goală.