Introducere în Web Development

Având părintele grid, urmează să specificăm pe ce rând și coloană apare fiecare element.

Vom seta proprietăți pe copiii elementului grid:

                    h2 {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 2;
}

p {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 2;
}

img {
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 3;
}

                

Valoarea lui grid-row-start reprezintă rândul de la care începe să fie afișat elementul.
Valoarea lui grid-row-end reprezintă rândul de la care nu mai este afișat elementul.
De aceea, avem valorile 1 și 2 pentru aceste două proprietăți.

Aceeași idee se aplică și la coloane.

Există și proprietăți în care putem seta mai multe astfel de valori:

Poziționare automată

Dacă nu definim aceste valori, sau setăm auto ca valoare, elementele vor fi distribuite automat în fiecare celulă, începând din stânga sus (în sistemul de scriere LTR).

Se mai poate controla cât se întinde o coloană (sau rând), folosind ca valoare span, urmat de un număr:

                    /* Începe de la 2 și se întinde 3 coloane */
grid-column: 2 / span 3;

/* Se întinde 2 coloane, de oriunde ar începe */
grid-column: span 2;