Właściwość CSSGrid
grid-row
Określa, w których wierszach siatki zaczyna się i kończy element.
- Wartość domyślna
auto- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- elementy grid i elementy pozycjonowane absolutnie w kontenerze grid
- JavaScript
element.style.gridRow = "span 2"
Przykład
#CSS
.dashboard {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 60px;
gap: 8px;
}
.dashboard .stats {
grid-row: span 2;
}HTML przykładu
<div class="dashboard stage">
<div class="box stats">Statystyki</div>
<div class="box">EXP</div><div class="box">Seria</div><div class="box">Paliwo</div><div class="box">Karty</div>
</div>Podgląd
Definicja i zastosowanie
#Właściwość grid-row to skrót dla grid-row-start i grid-row-end. Działa tak samo jak grid-column, tylko w pionie: 1 / 3 oznacza dwa pierwsze wiersze, a span 2 rozpiętość na dwa wiersze.
Rozciąganie elementów na kilka wierszy przydaje się w galeriach i dashboardach, gdzie jeden kafel ma być wyższy od pozostałych.
Jeśli element sięga poza zdefiniowane wiersze, siatka doda wiersze niejawne o wysokości z grid-auto-rows.
Składnia
#Składnia
grid-row: <początek> [ / <koniec> ]?;Wartości
#Wartości w praktyce
#auto
Element zajmuje jeden wiersz.
.target { grid-row: auto; }span 2
Element jest dwa razy wyższy i obejmuje dwa wiersze.
.target { grid-row: span 2; }2 / 3
Element przechodzi do drugiego wiersza.
.target { grid-row: 2 / 3; }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
#- Łącz
grid-rowzgrid-column, żeby precyzyjnie umieścić element w obu osiach. - Do umieszczania elementów po nazwie wygodniejsze są
grid-template-areasigrid-area.
Powiązane hasła
#- grid-columnOkreśla, w których kolumnach siatki zaczyna się i kończy element.
- grid-areaPrzypisuje element do nazwanego obszaru siatki albo ustawia jego wiersze i kolumny naraz.
- grid-auto-rowsUstala wysokość wierszy, które siatka tworzy automatycznie.
- grid-template-rowsDefiniuje wiersze siatki: ich liczbę i wysokości.
Widzisz błąd albo brakuje przykładu? Napisz do nas.