grid-row
в CSS — это свойство сетки (grid) для установки положения строк в сетке.
CSS Grid Layout — это система разметки, которая позволяет разбивать контейнер на строки и столбцы, создавая гибкие сетки для организации веб-страниц. С помощью свойства grid-row
, можно управлять позицией строк внутри сетки.
Например, следующий CSS-код создаст сетку с тремя строками:
.container {
display: grid;
grid-template-rows: 80px auto 1fr;
}
При указании значений свойства grid-template-rows
: первая строка будет высотой 8эпикселей, вторая строка будет иметь автоматическую высоту, зависящую от содержимого, а третья строка будет иметь высоту, заданную в долях от размера контейнера.
Чтобы установить положение строки в сетке, можно использовать свойство grid-row
:
.item {
grid-row: 2 / span 2;
}
Этот CSS-код задаст свойство grid-row
элементу с классом .item, чтобы поместить его на вторую строку сетки, и растянуть его на 2 строке вниз. span
определяет сколько строк будет занимать элемент.
Можно использовать grid-row
также для задания размеров строки как фиксированного значения или выражения, например:
.container {
grid-template-rows: repeat(4, 100px);
}
.item {
grid-row: 2 / 4;
}
В этом примере, высота каждой строки сетки задана на 100 пикселей (repeat(4, 100px)
), а элементу с классом item
задано занимать место на строках от 2 до 4 сетки.