grid-auto-flow
Decyduje, jak elementy bez określonej pozycji wypełniają siatkę.
- Wartość domyślna
row- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- kontenery grid
- JavaScript
element.style.gridAutoFlow = "column"
Przykład
#.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-flow: dense;
gap: 8px;
}
.gallery .big {
grid-column: span 2;
grid-row: span 2;
}<div class="gallery stage">
<div class="box">1</div><div class="box big">2</div><div class="box">3</div>
<div class="box">4</div><div class="box">5</div><div class="box">6</div>
</div>Definicja i zastosowanie
#Właściwość grid-auto-flow steruje algorytmem automatycznego rozmieszczania. Domyślnie (row) elementy wypełniają siatkę wiersz po wierszu, a nowe wiersze dokładane są na dole. Przy column siatka wypełnia się kolumnami i rośnie w prawo.
Słowo kluczowe dense włącza tryb gęsty: przeglądarka wraca do wcześniejszych luk i wypełnia je mniejszymi elementami, które pojawiły się później. Przydaje się w galeriach z elementami różnej wielkości.
Tryb dense może zmienić wizualną kolejność elementów względem kodu, co wpływa na nawigację klawiaturą. Używaj go tam, gdzie kolejność nie ma znaczenia.
Składnia
#grid-auto-flow: row | column | row dense | column dense;Wartości
#Wartości w praktyce
#row
.demo { grid-auto-flow: row; }row dense
.demo { grid-auto-flow: row dense; }column
.demo { grid-auto-flow: column; }
.wide { grid-column: auto; grid-row: span 2; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Tryb
densenajlepiej sprawdza się w galeriach zdjęć, gdzie kolejność nie ma znaczenia. - Do poziomych list kart połącz
grid-auto-flow: columnzgrid-auto-columns.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.