Właściwość CSSGrid
grid-template-rows
Definiuje wiersze siatki: ich liczbę i wysokości.
- Wartość domyślna
none- Dziedziczona
- Nie
- Animowalna
- tak, gdy zmieniają się tylko wartości przy tej samej liczbie wierszy
- Dotyczy
- kontenery grid
- JavaScript
element.style.gridTemplateRows = "auto 1fr auto"
Przykład
#CSS
.page {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 200px;
}HTML przykładu
<div class="page stage" style="gap: 8px;">
<header class="box">Nagłówek</header>
<main class="box">Treść rozciąga się na wolne miejsce</main>
<footer class="box">Stopka zawsze na dole</footer>
</div>Podgląd
Definicja i zastosowanie
#Właściwość grid-template-rows działa jak grid-template-columns, tylko dla wierszy. Każda wartość to wysokość kolejnego wiersza: długość, procent, fr, auto albo funkcja minmax().
Wiersze w fr mają sens wtedy, gdy kontener ma określoną wysokość. Klasyczny przykład to układ strony auto 1fr auto: nagłówek i stopka dopasowane do treści, a środek wypełnia całą resztę ekranu.
Jeśli elementów jest więcej niż zdefiniowanych wierszy, przeglądarka dokłada wiersze niejawne o wysokości z grid-auto-rows.
Składnia
#Składnia
grid-template-rows: none | <rozmiar ścieżki>+ | repeat(…) | subgrid;Wartości
#- Brak jawnych wierszy. Wysokość wynika z treści.
- Pierwszy wiersz ma 40px, drugi zajmuje resztę wysokości.
- Drugi wiersz jest dwa razy wyższy.
- Dwa wiersze równej wysokości.
Wartości w praktyce
#none
Brak jawnych wierszy. Wysokość wynika z treści.
.demo { grid-template-rows: none; }40px 1fr
Pierwszy wiersz ma 40px, drugi zajmuje resztę wysokości.
.demo { grid-template-rows: 40px 1fr; }1fr 2fr
Drugi wiersz jest dwa razy wyższy.
.demo { grid-template-rows: 1fr 2fr; }repeat(2, 1fr)
Dwa wiersze równej wysokości.
.demo { grid-template-rows: repeat(2, 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
#- Układ
auto 1fr autozmin-height: 100dvhprzykleja stopkę do dołu ekranu nawet na krótkich stronach. - Wiersze w
frwymagają określonej wysokości kontenera, inaczej zachowują się jakauto.
Powiązane hasła
#- grid-template-columnsDefiniuje kolumny siatki: ich liczbę i szerokości.
- grid-auto-rowsUstala wysokość wierszy, które siatka tworzy automatycznie.
- grid-templateSkrót ustawiający wiersze, kolumny i nazwane obszary siatki w jednej deklaracji.
- row-gapUstawia odstęp między wierszami w kontenerze flex lub grid.
Widzisz błąd albo brakuje przykładu? Napisz do nas.