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 сетки.

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

Закажите услугу Grid row css это

Наш специалист свяжется с вами в ближайшее время и уточнит детали