grid-template
Skrót ustawiający wiersze, kolumny i nazwane obszary siatki w jednej deklaracji.
- Wartość domyślna
none- Dziedziczona
- Nie
- Animowalna
- tak, tak jak właściwości składowe
- Dotyczy
- kontenery grid
- JavaScript
element.style.gridTemplate = "auto 1fr / 1fr 1fr"
Przykład
#.card {
display: grid;
grid-template:
"image title" auto
"image text" 1fr
/ 80px 1fr;
gap: 4px 12px;
}<div class="card stage">
<div class="box" style="grid-area: image">IMG</div>
<strong style="grid-area: title">Kurs Python</strong>
<span style="grid-area: text">12 modułów, od podstaw po uczenie maszynowe</span>
</div>Definicja i zastosowanie
#Właściwość grid-template łączy grid-template-rows, grid-template-columns i grid-template-areas. W najprostszej formie podajesz wiersze i kolumny oddzielone ukośnikiem: grid-template: auto 1fr / 200px 1fr.
Można też połączyć nazwy obszarów z wysokościami wierszy: każdy napis z nazwami dostaje obok swoją wysokość, a po ukośniku podajesz szerokości kolumn. Taki zapis bywa zwięzły, ale trudniejszy do czytania.
Skrót resetuje wszystkie trzy właściwości składowe, więc pominięte części wracają do wartości domyślnych.
Składnia
#grid-template: none | <wiersze> / <kolumny> | [ "<obszary>" <wysokość>? ]+ / <kolumny>;Wartości
#- Brak jawnej siatki.
- Dwa wiersze (drugi wyższy) i trzy równe kolumny.
- Niski wiersz i wąska kolumna, reszta miejsca dla pozostałych.
Wartości w praktyce
#none
.demo { grid-template: none; }1fr 2fr / 1fr 1fr 1fr
.demo { grid-template: 1fr 2fr / 1fr 1fr 1fr; }40px 1fr / 80px 1fr
.demo { grid-template: 40px 1fr / 80px 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
#- Przy złożonych układach pisz
grid-template-areasigrid-template-columnsosobno. Skrót łatwo zepsuć jednym znakiem. - Ukośnik w skrócie zawsze oddziela wiersze (przed) od kolumn (po).
Powiązane hasła
#- grid-template-rowsDefiniuje wiersze siatki: ich liczbę i wysokości.
- grid-template-columnsDefiniuje kolumny siatki: ich liczbę i szerokości.
- grid-template-areasOpisuje układ siatki nazwanymi obszarami, niemal jak rysunek w kodzie.
- grid-areaPrzypisuje element do nazwanego obszaru siatki albo ustawia jego wiersze i kolumny naraz.
Widzisz błąd albo brakuje przykładu? Napisz do nas.