grid-row
Какие ряды занимает элемент сетки.
Синтаксис
grid-row: start / end;Значения
| Параметр | Тип | Описание |
|---|---|---|
| start / end | lines | Номера линий: `1 / 3`. |
| span n | keyword | Занимает n рядов. |
Примеры
Элемент высотой в два ряда:
<style>
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.grid div { padding: 8px; background: plum; }
</style>
<div class="grid">
<div style="grid-row: span 2;">span 2 — two rows tall</div>
<div>1</div>
<div>2</div>
</div>Примечания
Работает так же, как grid-column, только по вертикали.
См. также
- grid-column — Какие колонки занимает элемент сетки.
- grid-area — Помещает элемент сетки в именованную область или между заданными линиями.
- grid-template-rows — Количество и высота рядов сетки.
В учебнике
- Линии и области сетки — Как поставить элемент в нужное место сетки — номера линий, grid-column и grid-row, span, именованные области grid-template-areas.