grid-template-columns
Definiuje kolumny siatki: ich liczbę i szerokości.
- Wartość domyślna
none- Dziedziczona
- Nie
- Animowalna
- tak, gdy zmieniają się tylko wartości przy tej samej liczbie kolumn
- Dotyczy
- kontenery grid
- JavaScript
element.style.gridTemplateColumns = "1fr 2fr"
Przykład
#.courses {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
}<div class="courses stage">
<div class="box">HTML i CSS</div><div class="box">JavaScript</div><div class="box">TypeScript</div>
<div class="box">Python</div><div class="box">React</div>
</div>Definicja i zastosowanie
#Właściwość grid-template-columns to serce układu CSS Grid. Każda wartość na liście to jedna kolumna, więc 200px 1fr 1fr tworzy trzy kolumny: pierwszą o stałej szerokości i dwie dzielące resztę miejsca po równo.
Jednostka fr oznacza ułamek wolnego miejsca, a funkcja repeat() skraca powtarzające się wzorce. Zapis repeat(auto-fill, minmax(160px, 1fr)) tworzy tyle kolumn o szerokości co najmniej 160px, ile się zmieści, bez żadnych zapytań @media.
Elementy siatki trafiają automatycznie do kolejnych komórek, wiersz po wierszu. Wiersze, których nie zdefiniujesz, powstają same i dostają wysokość z grid-auto-rows.
Składnia
#grid-template-columns: none | <rozmiar ścieżki>+ | repeat(…) | subgrid;Wartości
#<długość>
Dwie kolumny o stałej szerokości.<fr>
Druga kolumna jest dwa razy szersza od pierwszej.repeat()
Trzy równe kolumny.- Stała kolumna, elastyczna i dopasowana do treści.
repeat(auto-fill, minmax(70px, 1fr))
auto-fill + minmax()
Tyle kolumn o szerokości co najmniej 70px, ile się zmieści. Siatka sama dopasowuje się do szerokości.
Wartości w praktyce
#100px 100px
.demo { grid-template-columns: 100px 100px; }1fr 2fr
.demo { grid-template-columns: 1fr 2fr; }repeat(3, 1fr)
.demo { grid-template-columns: repeat(3, 1fr); }80px 1fr auto
.demo { grid-template-columns: 80px 1fr auto; }repeat(auto-fill, minmax(70px, 1fr))
.demo { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }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
#minmax(160px, 1fr)zauto-filllubauto-fitto najprostsza responsywna siatka kart bez zapytań o szerokość ekranu.frdzieli wolne miejsce, dlatego1fr 1frnie zawsze daje równe kolumny przy dużej treści. Pomagaminmax(0, 1fr).
Powiązane hasła
#- grid-template-rowsDefiniuje wiersze siatki: ich liczbę i wysokości.
- grid-template-areasOpisuje układ siatki nazwanymi obszarami, niemal jak rysunek w kodzie.
- gapUstawia odstępy między elementami w kontenerze flex, grid i wielokolumnowym.
- grid-auto-flowDecyduje, jak elementy bez określonej pozycji wypełniają siatkę.
- grid-columnOkreśla, w których kolumnach siatki zaczyna się i kończy element.
- repeat()Powtarza wzór kolumn lub wierszy siatki. Z auto-fill lub auto-fit i minmax() tworzy responsywną siatkę bez media queries.
Widzisz błąd albo brakuje przykładu? Napisz do nas.