Свойство grid-auto-rows
  1. Главная
  2. CSS
  3. Свойство grid-auto-rows
Создание сайта на CMS WordPress: обучение и хостинг
← Перейти к списку свойств

СВОЙСТВО GRID-AUTO-ROWS

Свойство grid-auto-rows устанавливает размер строк в сетке.

Поддержка браузеров

16+

Синтаксис

grid-auto-rows: auto|max-content|min-content|единицы измерения

Значения свойства

Значение Описание
auto Размер строк определяется размером самого большого элемента в строке. Это значение по умолчанию.
max-content Устанавливает размер каждой строки, взависимости от самого большого элемента в строке.
min-content .
единицы измерения .
initial Устанавливает значение по умолчанию.
inherit Унаследует значение свойства от родительского элемента.

Песочница

Код в песочнице можно редактировать и видеть результат в реальном времени:

<div class="grid">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
HTML 
.grid {
    display: grid;
    grid-gap: 15px;
    background-color: #f1f1f1;
    grid-auto-flow: column;
    grid-template-rows: auto auto
}

.item {height: 100px}

.item:nth-child(1) {background: yellow}
.item:nth-child(2) {background: blue}
.item:nth-child(3) {background: beige}
.item:nth-child(4) {background: yellow}
.item:nth-child(5) {background: blue}
.item:nth-child(6) {background: beige}
CSS
← Перейти к списку свойств