Właściwość CSSGrid
grid-auto-columns
Ustala szerokość kolumn, które siatka tworzy automatycznie.
- Wartość domyślna
auto- Dziedziczona
- Nie
- Animowalna
- tak, jako długość, procent lub fr
- Dotyczy
- kontenery grid
- JavaScript
element.style.gridAutoColumns = "120px"
Przykład
#CSS
.carousel {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 140px;
gap: 10px;
overflow-x: auto;
}HTML przykładu
<div class="carousel stage">
<div class="box">Moduł 1</div><div class="box">Moduł 2</div><div class="box">Moduł 3</div>
<div class="box">Moduł 4</div><div class="box">Moduł 5</div>
</div>Podgląd
Definicja i zastosowanie
#Właściwość grid-auto-columns dotyczy kolumn niejawnych, czyli takich, których nie ma w grid-template-columns, ale które powstają, gdy element trafi poza zdefiniowaną siatkę albo gdy grid-auto-flow ustawiono na column.
Domyślnie niejawne kolumny mają szerokość auto, czyli dopasowaną do treści. Podając stałą wartość, na przykład 120px, uzyskasz równe kolumny w poziomym przewijanym pasku.
Można podać kilka wartości, wtedy powtarzają się cyklicznie dla kolejnych niejawnych kolumn.
Składnia
#Składnia
grid-auto-columns: <rozmiar ścieżki>+;Wartości
#Wartości w praktyce
#auto
Kolumny dopasowane do treści i rozciągnięte na dostępne miejsce.
.demo { grid-auto-columns: auto; }70px
Każda automatyczna kolumna ma 70px.
.demo { grid-auto-columns: 70px; }1fr
Automatyczne kolumny dzielą miejsce po równo.
.demo { grid-auto-columns: 1fr; }40px 80px
Szerokości powtarzają się na zmianę.
.demo { grid-auto-columns: 40px 80px; }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
#- Połączenie
grid-auto-flow: columnigrid-auto-columnsto wygodny sposób na poziomy pasek kart. - Kolumny zdefiniowane w
grid-template-columnsnie podlegają tej właściwości.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.