Atrybut grid-auto-flow w CSS

Definicja i użycie

Atrybut grid-auto-flow kontroluje, jak automatycznie umieszczane elementy są wstawiane do siatki.

Inne zasoby:

CSS Tutorial:CSS Grid Layout

Przykład

Przykład 1

Wstaw automatycznie umieszczane elementy wierszami:

.grid-container {
  display: grid;
  grid-auto-flow: column;
}

Spróbuj sam

Przykład 2

Wypełnij wszystkie dziury w siatce, dodając wartość "dense":

.grid-container {
  display: grid;
  grid-auto-flow: row dense;
}

Spróbuj sam

CSS syntaxa

grid-auto-flow: row|column|dense|row dense|column dense;

Wartość atrybutu

Wartość Opis
row Domyślna wartość. Umieszczaj elementy, wypełniając każde pole w wierszu.
column Umieszczaj elementy, wypełniając każde pole w kolumnie.
dense Umieszczaj elementy, wypełniając każdą dziurę w siatce.
row dense Umieszczaj elementy, wypełniając każde pole w wierszu, oraz wypełniając każdą dziurę w siatce.
column dense Umieszczaj elementy, wypełniając każde pole w kolumnie, oraz wypełniając każdą dziurę w siatce.

Szczegółowe informacje techniczne

Domyślna wartość: row
Inherytacja: Nie
Tworzenie animacji: Obsługiwane. Zobacz:Atrybuty animacji.
Wersja: CSS Grid Layout Module Level 1
JavaScript syntaxa: object.style.gridAutoFlow="row dense"

Obsługa przeglądarki

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44