CSS-свойство `grid-auto-rows`

Свойство grid-auto-rows CSS задаёт размер неявно созданной дорожки строки сетки или шаблона дорожек.

Если элемент сетки размещается в строке, размер которой явно не задан свойством grid-template-rows, для него создаются неявные дорожки сетки. Это может произойти, если элемент явно размещается в строке за пределами заданного диапазона или если алгоритм автоматического размещения создаёт дополнительные строки.

Попробуйте

grid-auto-rows: auto;

grid-auto-rows: 50px;

grid-auto-rows: min-content;

grid-auto-rows: minmax(30px, auto);

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 40px;
  grid-gap: 10px;
  width: 220px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  font-size: 22px;
}

#example-element div:last-child {
  font-size: 13px;
}

Синтаксис

/* Keyword values */
grid-auto-rows: min-content;
grid-auto-rows: max-content;
grid-auto-rows: auto;

/* <length> values */
grid-auto-rows: 100px;
grid-auto-rows: 20cm;
grid-auto-rows: 50vmax;

/* <percentage> values */
grid-auto-rows: 10%;
grid-auto-rows: 33.3%;

/* <flex> values */
grid-auto-rows: 0.5fr;
grid-auto-rows: 3fr;

/* minmax() values */
grid-auto-rows: minmax(100px, auto);
grid-auto-rows: minmax(max-content, 2fr);
grid-auto-rows: minmax(20%, 80vmax);

/* fit-content() values */
grid-auto-rows: fit-content(400px);
grid-auto-rows: fit-content(5cm);
grid-auto-rows: fit-content(20%);

/* multiple track-size values */
grid-auto-rows: min-content max-content auto;
grid-auto-rows: 100px 150px 390px;
grid-auto-rows: 10% 33.3%;
grid-auto-rows: 0.5fr 3fr 1fr;
grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);

/* Global values */
grid-auto-rows: inherit;
grid-auto-rows: initial;
grid-auto-rows: revert;
grid-auto-rows: revert-layer;
grid-auto-rows: unset;

Значения

<length>

Неотрицательная длина.

<percentage>

Неотрицательное значение <percentage> относительно размера блочной оси контейнера сетки. Если размер блочной оси контейнера сетки не определён, процентное значение трактуется как auto.

flex

Неотрицательная размерность с единицей fr, задающая коэффициент гибкости дорожки. Каждая дорожка размера <flex> занимает долю оставшегося пространства, пропорциональную её коэффициенту гибкости.

При использовании вне нотации minmax() подразумевается автоматический минимальный размер (то есть minmax(auto, <flex>)).

max-content

Ключевое слово, представляющее наибольший максимальный вклад в размер содержимого от элементов сетки, занимающих дорожку.

min-content

Ключевое слово, представляющее наибольший минимальный вклад в размер содержимого от элементов сетки, занимающих дорожку.

minmax(min, max)

Функциональная нотация, задающая диапазон размеров, не меньший min и не превышающий max. Если max меньше min, значение max игнорируется, а функция трактуется как min. В качестве максимума значение <flex> задаёт коэффициент гибкости дорожки. В качестве минимума оно трактуется как ноль (или как минимальный размер содержимого, если размер контейнера сетки определяется ограничением минимального размера содержимого).

fit-content( [ <length> | <percentage> ] )

Представляет формулу min(max-content, max(auto, argument)), которая вычисляется аналогично auto (то есть minmax(auto, max-content)), за исключением того, что размер дорожки ограничивается значением аргумента, если он превышает минимум auto.

auto

В качестве максимума представляет наибольший размер max-content среди элементов этой дорожки.

В качестве минимума представляет наибольший минимальный размер элементов этой дорожки (задаваемый свойствами min-width/min-height этих элементов). Часто, хотя и не всегда, это размер min-content.

При использовании вне нотации minmax() значение auto представляет диапазон между описанными выше минимальным и максимальным размерами. В большинстве случаев оно ведёт себя аналогично minmax(min-content,max-content).

Примечание: размеры дорожек auto (и только дорожек auto) могут растягиваться с помощью свойств align-content и justify-content. Поэтому по умолчанию дорожка размера auto занимает всё оставшееся пространство контейнера сетки.

Формальное определение

Формальный синтаксис

grid-auto-rows = 
  <track-size>+

<track-size> = 
  <track-breadth> |
  minmax( <inflexible-breadth> , <track-breadth> ) |
  fit-content( <length-percentage> )

<track-breadth> = 
  <length-percentage> |
  <flex> |
  min-content |
  max-content |
  auto

<inflexible-breadth> = 
  <length-percentage> |
  min-content |
  max-content |
  auto

<length-percentage> = 
  <length> |
  <percentage>

Примеры

Задание размера строки сетки

HTML

<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>

CSS

#grid {
  width: 200px;
  display: grid;
  grid-template-areas: "a a";
  gap: 10px;
  grid-auto-rows: 100px;
}

#grid > div {
  background-color: lime;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• grid-auto-columns
• grid-auto-flow
• grid
• Автоматическое размещение в макете сетки — задание размеров строк в неявной сетке
• Видео: Знакомство с автоматическим размещением элементов сетки и порядком