Właściwość CSSGrid
grid-auto-rows
Ustala wysokość wierszy, które siatka tworzy automatycznie.
- Wartość domyślna
auto- Dziedziczona
- Nie
- Animowalna
- tak, jako długość, procent lub fr
- Dotyczy
- kontenery grid
- JavaScript
element.style.gridAutoRows = "minmax(100px, auto)"
Przykład
#CSS
.cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: minmax(70px, auto);
gap: 10px;
}HTML przykładu
<div class="cards stage">
<div class="box">Krótka karta</div>
<div class="box">Karta z dłuższym opisem, która potrzebuje więcej miejsca w pionie</div>
<div class="box">Trzecia</div><div class="box">Czwarta</div>
</div>Podgląd
Definicja i zastosowanie
#Właściwość grid-auto-rows określa wysokość wierszy niejawnych. W typowej siatce definiujesz tylko kolumny, a wiersze powstają same, gdy przybywa elementów. Wszystkie one dostają właśnie tę wysokość.
Szczególnie przydatny jest zapis minmax(100px, auto): wiersz ma co najmniej 100px, ale urośnie, jeśli treść tego wymaga. Dzięki temu karty w siatce mają spójną minimalną wysokość.
Podanie kilku wartości sprawia, że wysokości powtarzają się cyklicznie, co pozwala budować rytmiczne układy galerii.
Składnia
#Składnia
grid-auto-rows: <rozmiar ścieżki>+;Wartości
#- Wiersze dopasowane do treści.
- Każdy wiersz ma 80px wysokości.
- Co najmniej 60px, więcej jeśli treść tego wymaga.
- Wysokości wierszy na zmianę.
Wartości w praktyce
#auto
Wiersze dopasowane do treści.
.demo { grid-auto-rows: auto; }80px
Każdy wiersz ma 80px wysokości.
.demo { grid-auto-rows: 80px; }minmax(60px, auto)
Co najmniej 60px, więcej jeśli treść tego wymaga.
.demo { grid-auto-rows: minmax(60px, auto); }40px 90px
Wysokości wierszy na zmianę.
.demo { grid-auto-rows: 40px 90px; }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(Xpx, auto)daje równą minimalną wysokość kart, bez ryzyka ucięcia dłuższej treści.- Wiersze z
grid-template-rowsmają pierwszeństwo,grid-auto-rowsdotyczy tylko dodatkowych.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.