Atrybut grid-auto-columns w CSS

Definicja i użycie

Atrybut grid-auto-columns ustawia rozmiar kolumn w kontenerze siatki.

Ta właściwość wpływa tylko na kolumny, dla których nie ustawiono rozmiaru.

Zobacz również:

Kurs CSSUkład siatki CSS

Podręcznik CSSAtrybut grid-auto-rows

Przykład

Ustaw domyślny rozmiar kolumn w sieci:

.grid-container {
  display: grid;
  grid-auto-columns: 50px;
}

Spróbuj sam

Gramatyka CSS

grid-auto-columns: auto|max-content|min-content|length;

Wartość atrybutu

Wartość Opis
auto Domyślna wartość. Rozmiar kolumny zależy od rozmiaru kontenera.
fit-content()
max-content Ustaw rozmiar każdej kolumny na podstawie największego elementu w kolumnie.
min-content Ustaw rozmiar każdej kolumny na podstawie najmniejszego elementu w kolumnie.
minmax(min.max) Ustaw zakres rozmiaru większy lub równy min i mniejszy lub równy max.
length Ustaw rozmiar kolumn, używając poprawnych wartości długości. Zobacz:Jednostki długości.
% Ustaw rozmiar kolumn, używając procentowych wartości.

Szczegóły techniczne

Domyślna wartość: auto
Dziedziczenie: Nie
Tworzenie animacji: Obsługiwane. Zobacz:Atrybuty animacji.
Wersja: Moduł układu siatki CSS Grid Level 1
Gramatyka JavaScript: object.style.gridAutoColumns="120px"

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