`grid-auto-flow, grid-auto-rows și grid-auto-columns` în CSS

Controlează cum sunt așezate automat elementele în grilă și ce mărime au rândurile și coloanele create implicit.

Sintaxă CSS

grid-auto-flow: row;       /* implicit */
grid-auto-flow: column;
grid-auto-flow: row dense;

grid-auto-rows: 200px;
grid-auto-rows: minmax(120px, auto);
grid-auto-columns: 1fr;

Ce face `grid-auto-flow, grid-auto-rows și grid-auto-columns`

Când un element din grilă nu are o poziție dată (grid-column, grid-row), algoritmul de plasare automată îl pune în prima celulă liberă. grid-auto-flow spune în ce direcție caută: pe rânduri (row, implicit) sau pe coloane (column).

Cuvântul dense îi permite să se întoarcă și să umple golurile lăsate de elementele mai mari. Grila devine compactă, dar ordinea vizuală poate diferi de ordinea din HTML.

Dacă există mai multe elemente decât celulele definite cu grid-template-rows sau grid-template-columns, browserul creează rânduri sau coloane noi (grila implicită). grid-auto-rows și grid-auto-columns stabilesc mărimea lor.

Valori uzuale

Valoare	Descriere
`row`	Implicit: umple rândurile pe rând, creând rânduri noi la nevoie.
`column`	Umple coloanele una câte una, creând coloane noi la nevoie.
`dense`	Umple golurile cu elementele mai mici care vin după (adăugat la row sau column).
`grid-auto-rows`	Înălțimea rândurilor create automat (ex. minmax(120px, auto)).
`grid-auto-columns`	Lățimea coloanelor create automat.

Exemple

Exemplul 1: Galerie compactă, fără goluri

Unele fotografii ocupă două coloane; dense mută pozele mici în golurile rămase.

.galerie {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 150px;
  grid-auto-flow: row dense;
  gap: 8px;
}
.galerie .lata {
  grid-column: span 2;
}

Efect vizual în browser

Fotografiile din excursia la Sibiu umplu complet grila de 4 coloane cu rânduri de 150px; nu rămân celule goale, chiar dacă unele poze late nu încap la capătul unui rând.

Exemplul 2: Bandă orizontală de carduri cu grid-auto-flow: column

Fiecare card nou devine o coloană nouă de 220px, iar bara se poate derula pe orizontală.

.banda-oferte {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 220px;
  gap: 12px;
  overflow-x: auto;
}