Introducere în Web Development

În continuare, pe elementul părinte, va trebui să îi spunem câte coloane și rânduri avem.

Vom face asta, cu proprietățile
grid-template-columns, respectiv grid-template-rows.

Valorile pe care le dăm vor fi mărimile fiecărei coloane, sau fiecărui rând:

                    article {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
}
                

Lăsând doar astea, browserul va distribui fiecare element direct descendent în fiecare celulă în ordine, de la stânga la dreapta.

Fracțiuni

În loc de procente, putem folosi o unitate nouă de măsură: 1fr. Este o unitate de măsură ce poate fi folosită doar în grid. Browserul va avea grijă ca fiecare fr dintr-un rând sau coloană să aibă exact aceeași dimensiune.

                    grid-template-columns: 1fr 1fr;
                

Această declarație va însemna că sunt mereu două coloane perfect egale.

Avantajul față de procente este că nu mai trebuie să calculăm procentul exact. Iată alt exemplu:

                    grid-template-columns: 2fr 1fr;
                

Acum vom avea mereu coloana din stânga exact de două ori mai mare decât coloana din dreapta. Cu procente, am fi pus poate 66% și 33%, rămânând cu 1% nefolosiți.

repeat()

Uneori avem nevoie să repetăm coloanele sau rândurile. Am putea face asta:

                    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
                

Dar un programator bun are și o doză sănătoasă de lene. Pentru noi s-a inventat funcția repeat():

                    grid-template-columns: repeat(12, 1fr);
                

La primul parametru punem numele de repetiții. Al doilea punem coloanele pe care vrem să repetăm. Putem pune una sau mai multe separate prin spațiu.

Și pentru că lenea productivă e chiar benefică, putem merge mai departe să folosim o variabilă pentru numărul de repetiții:

                    grid-template-columns: 30ch repeat(var(--columns), 1fr 30ch);
                

În acest exemplu avem prima coloană de 30ch, apoi un număr flexibil de câte 2 coloane de 1fr și alți 30ch.