Funcția repeat și proprietatea grid

Repetarea rândurilor și coloanelor

Dacă avem multe coloane și/sau rânduri și acestea au dimensiuni egale, este logic să folosim funcția specială repeat(), care ne permite să configurăm rândurile și coloanele. Astfel, în exemplul de mai sus, se repetă definirea unor rânduri și coloane identice în containerul grid:

grid-template-columns: 8em 8em 8em;
grid-template-rows: 5em 5em 5em 5em;

Aici vedem că se repetă aceleași dimensiuni - 8em și 5em pentru setarea lățimii coloanelor și înălțimii rândurilor. Prin urmare, vom rescrie stilurile, aplicând funcția repeat:

.grid-container {
   border: solid 2px #000;
   display: grid;
   grid-template-columns: repeat(3, 8em);
   grid-template-rows: repeat(4, 5em);
}

Primul parametru al funcției repeat reprezintă numărul de repetări, iar al doilea - definirea rândurilor sau coloanelor. De exemplu, proprietatea grid-template-columns: repeat(3, 8em); spune că trebuie să definim 3 coloane cu lățimea de 8em.

În mod corespunzător, expresia grid-template-rows: repeat(4, 5em) definește 4 rânduri cu înălțimea de 5em.

Putem seta repetarea mai multor coloane și rânduri:

.grid-container {
   border: solid 2px #000;
   display: grid;
   grid-template-columns: repeat(2, 7em 8em);
   grid-template-rows: 6em repeat(3, 5em);
}

În acest caz, vor fi create 4 coloane: de două ori se vor repeta două coloane cu lățimea de 7em și 8em.

În cazul rândurilor, vor fi create 4 rânduri. Primul va avea înălțimea de 6em, iar celelalte trei - 5em.

Proprietatea grid

Proprietatea grid combină proprietățile grid-template-rows și grid-template-columns și ne permite să setăm simultan configurările pentru rânduri și coloane în următorul format:

grid: grid-template-rows / grid-template-columns;

De exemplu, avem următoarea definire a clasei containerului grid:

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

Putem să scurtăm această clasă astfel:

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

Sau, folosind din nou funcția repeat(), putem să scurtăm și mai mult definirea gridului:

.grid-container {
   border: solid 2px #000;
   display: grid;
   grid: repeat(4, 5em) / repeat(3, 8em);
}