W3docs
ru
Войти

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

The grid-row-end CSS property defines the end row of the item and the number of rows to span. See the values of grid-row-end property with examples.

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

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

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

Синтаксис

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

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

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

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

<!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>
Попробуйте сами »

Результат

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

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

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

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

<!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>
Попробуйте сами »

Значения

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

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

Практика

Практика

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