Свойство CSS grid-row-end

Свойство grid-row-end используется для указания строки, на которой нужно прекратить отображение элемента, или количества строк, которые займет элемент.

Примечание: Явное задание width или height для элементов сетки, как правило, не требуется, так как сеточная раскладка автоматически управляет их размерами.

Начальное значение	auto
Применяется к	Элементы сетки.
Наследуется	Нет.
Анимация	Да.
Версия	CSS Grid Layout Module Level 1
Синтаксис DOM	object.style.gridRowEnd = "4";

Синтаксис

Синтаксис CSS grid-row-end

css

grid-row-end: auto | grid-line | span n | inherit | initial | unset;

Пример свойства grid-row-end:

Пример кода CSS grid-row-end

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 10px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .box {
        grid-row-end: auto;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row-end property example</h2>
    <div class="grid-container">
      <div class="box">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Try it Yourself »

Результат

CSS grid-row-end с несколькими элементами

Здесь мы указали свойство grid-row-end как "auto". В следующем примере элемент занимает три строки.

Пример свойства grid-row-end со значением "span 3":

Пример CSS grid-row-end с несколькими элементами

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 10px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .box {
        grid-row-end: span 3;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row-end property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div class="box">2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Try it Yourself »

Значения

Значение	Описание	Запустить
auto	Будет занята только одна строка. Это значение по умолчанию для данного свойства.	Запустить »
span n	Указывает количество строк для охвата.	Запустить »
grid-line	Указывает строку сетки, на которой заканчивается элемент.	Запустить »
initial	Заставляет свойство использовать значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

Для удобства вы также можете использовать сокращенное свойство grid-row, чтобы задать начальные и конечные линии одновременно.

Практика

What does the 'grid-row-end' CSS property do?

It defines the line where a grid item’s end side within the grid ends horizontally.It defines the line where a grid item’s end side within the grid ends vertically.It aligns the items within the grid vertically.It controls the space between two rows in the grid.

Свойство CSS grid-row-end ​

Синтаксис ​

Пример свойства grid-row-end: ​

Результат ​

Пример свойства grid-row-end со значением "span 3": ​

Значения ​