Kurs HTML

Jak Grid umieszcza elementy domyślnie?

Gdy mamy więcej elementów Grid niż zdefiniowanych jawnie miejsc (za pomocą linii lub obszarów), Grid musi zdecydować, gdzie umieścić te pozostałe, **automatycznie umieszczane** elementy.

Domyślnie, Grid umieszcza elementy w kolejnych pustych komórkach, wypełniając siatkę **wiersz po wierszu**, od lewej do prawej (w językach LTR). Jeśli wiersz się zapełni, przechodzi do następnego.

Właściwość grid-auto-flow pozwala kontrolować ten proces automatycznego umieszczania. Stosuje się ją do **kontenera Grid**.

Wartości grid-auto-flow

Właściwość ta kontroluje dwa aspekty: kierunek przepływu oraz algorytm wypełniania luk.

• row (wartość domyślna): Automatycznie umieszczane elementy wypełniają kolejne komórki w **wierszu**. Jeśli w bieżącym wierszu nie ma już miejsca, tworzony jest nowy wiersz (lub używany jest następny zdefiniowany wiersz).
• column: Automatycznie umieszczane elementy wypełniają kolejne komórki w **kolumnie**. Jeśli w bieżącej kolumnie nie ma już miejsca, tworzona jest nowa kolumna (lub używana jest następna zdefiniowana kolumna).
• dense: To słowo kluczowe można dodać do row lub column (np. grid-auto-flow: row dense; lub grid-auto-flow: column dense;). Włącza ono algorytm "gęstego" pakowania. Jeśli późniejszy element jest mniejszy i może zmieścić się we wcześniejszej luce pozostawionej przez większy element, algorytm dense spróbuje go tam umieścić, potencjalnie zmieniając wizualną kolejność elementów w stosunku do ich kolejności w DOM.

Przykład: row vs column

<div class="container row-flow">
  <div class="item item-1">1</div>
  <div class="item item-2" style="grid-column: span 2;">2 (span 2)</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
</div>

<div class="container column-flow">
  <div class="item item-1">1</div>
  <div class="item item-2" style="grid-row: span 2;">2 (span 2)</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
</div>Kopiuj

.container {
  display: grid;
  grid-template-columns: repeat(3, 80px);
  grid-template-rows: repeat(3, 60px);
  gap: 5px;
  border: 1px solid black;
  margin-bottom: 15px;
}

.item {
  background-color: lightblue;
  border: 1px solid navy;
  display: flex; justify-content: center; align-items: center;
}

.item-2 { background-color: lightcoral; }

.row-flow { grid-auto-flow: row; } /* Domyślnie */
.column-flow { grid-auto-flow: column; }
Kopiuj

Efekt wizualny:

grid-auto-flow: row; (domyślnie)

Element 1 w [1,1]. Element 2 zajmuje [1,2] i [1,3]. Element 3 przechodzi do następnego wiersza [2,1]. Element 4 w [2,2].

grid-auto-flow: column;

Element 1 w [1,1]. Element 2 zajmuje [2,1] i [3,1]. Element 3 przechodzi do następnej kolumny [1,2]. Element 4 w [2,2].

Algorytm dense

Algorytm dense próbuje wypełnić luki w siatce, które mogły powstać przez umieszczenie większych elementów. Może to spowodować, że elementy pojawią się wizualnie w innej kolejności niż w kodzie HTML.

<div class="container dense-flow">
  <div class="item item-1" style="grid-column: span 2;">1 (span 2)</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
</div>Kopiuj

.dense-flow {
  display: grid;
  grid-template-columns: repeat(3, 80px);
  grid-template-rows: repeat(3, 60px);
  gap: 5px;
  border: 1px solid black;
  grid-auto-flow: row dense; /* Włącz gęste pakowanie wierszami */
}
/* Style .item jak poprzednio */
.item-1 { background-color: lightcoral; }
Kopiuj

Efekt wizualny (row dense):

Bez dense: Element 1 zajmuje [1,1] i [1,2]. Element 2 zajmuje [1,3]. Element 3 przechodzi do [2,1]. Element 4 do [2,2]. Komórka [2,3] pozostaje pusta.

Z dense: Element 1 zajmuje [1,1] i [1,2]. Element 2 normalnie trafiłby do [1,3]. Element 3 normalnie trafiłby do [2,1]. Ale algorytm dense zauważa, że element 2 (który zajmuje 1 komórkę) zmieści się w luce [1,3] - umieszcza go tam. Następnie element 3 trafia do [2,1], a element 4 do [2,2]. Efekt końcowy jest taki sam jak bez dense w tym konkretnym przypadku, ale gdyby element 2 był większy, a 3 mniejszy, 3 mógłby wskoczyć w lukę przed 2.

Uwaga: Używanie dense może poprawić wykorzystanie przestrzeni, ale potencjalnie kosztem logiki wizualnej kolejności, co może być problematyczne dla dostępności, podobnie jak właściwość order we Flexboxie.