Atrybut CSS grid-template-columns

Definicja i użycie

Atrybut grid-template-columns określa liczbę kolumn (i szerokość) w układzie siatki.

Te wartości to lista rozdzielona spacjami, gdzie każda wartość określa rozmiar odpowiedniej kolumny.

Stwórz kontener siatki z czterema kolumnami:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

Stwórz układ siatki z czterema kolumnami i określ rozmiar każdej z nich:

.grid-container {
  display: grid;
  grid-template-columns: 30px 200px auto 100px;
}

grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;

Wartość	Opis
none	Domyślna wartość. Twórz kolumny, gdy to konieczne.
auto	Rozmiar kolumn zależy od rozmiaru kontenera oraz od rozmiaru zawartości elementów w kolumnie.
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.
length	Ustaw rozmiar kolumn, używając legalnych wartości długości. Zobacz:Jednostki długości.
initial	Ustaw tę właściwość na jej wartość domyślną. Zobacz: initial.
inherit	Dziedziczy tę właściwość od elementu nadrzędnego. Zobacz: inherit.

Domyślna wartość:	none
Dziedziczenie:	nie
Tworzenie animacji:	Obsługiwane. Zobacz:Atrybuty animacji.
Wersja:	Moduł układu siatki CSS Grid Level 1
Gramatyka JavaScript:	object.style.gridTemplateColumns="50px 50px 50px"

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

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