W3docs
ru
Войти

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

Свойство grid-row-start задаёт строку сетки, с которой начинается элемент. Описание, значения и примеры.

CSS-свойство grid-row-start задаёт линию строки сетки, с которой начинается элемент. Иными словами, оно определяет начальную блочную линию (верхний край в горизонтальном направлении слева направо) области сетки элемента. Можно указать номер линии, именованную линию или ключевое слово span, которое растягивает элемент на несколько строк.

Это свойство действует только на элементы сетки — прямые потомки элемента, у которого display равен grid или inline-grid. Для любых других элементов оно игнорируется. Свойство является развёрнутой формой начальной стороны сокращения grid-row и работает в паре с grid-row-end, определяя полный вертикальный охват. Для горизонтального размещения используйте соответствующее свойство grid-column-start.

На этой странице рассматриваются синтаксис grid-row-start, каждое допустимое значение, практические примеры (номера линий и span), а также распространённые ошибки.

Начальное значениеauto
Применяется кЭлементам сетки.
НаследуетсяНет.
АнимируетсяДа. Размещение элементов можно анимировать.
ВерсияCSS Grid Layout Module Level 1
DOM-синтаксисobject.style.gridRowStart = "5";

Синтаксис

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

grid-row-start: auto | <line> | span <number> | initial | inherit;

Примечание: <line> — заполнитель для номера или пользовательского имени линии.

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 20px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 30px;
      }
      .box {
        grid-row-start: auto;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row-start property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div class="box">3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>
Попробуйте сами »

Результат

CSS grid-row-start со значением auto по умолчанию

При grid-row-start: auto блок 3 просто занимает своё естественное место в потоке сетки — auto позволяет алгоритму автоматического размещения сетки самому решить, куда поместить элемент.

Пример свойства grid-row-start, где третий блок начинается с первой строки:

Пример CSS grid-row-start с первой строкой

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 20px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 30px;
      }
      .box {
        grid-row-start: 1;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row-start property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div class="box">3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>
Попробуйте сами »

Установка grid-row-start: 1 фиксирует блок 3 на линии строки сетки 1, поэтому он всегда начинается с самой верхней строки вне зависимости от порядка в источнике.

Пример свойства grid-row-start, где четвёртый блок начинается со второй строки:

Пример CSS grid-row-start со второй строкой

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 20px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 30px;
      }
      .box {
        grid-row-start: 2;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row-start property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div class="box">4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>
Попробуйте сами »

Пример свойства grid-row-start с ключевым словом span:

Пример CSS grid-row-start со span

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 20px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 30px;
      }
      .box {
        grid-row-start: span 2;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row-start property example with span</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div class="box">3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>
Попробуйте сами »

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

Пример значений initial и inherit:

Пример CSS grid-row-start с initial/inherit

.box-initial {
  grid-row-start: initial; /* Resets to the default 'auto' behavior */
}
.box-inherit {
  grid-row-start: inherit; /* Inherits the value from the parent grid item */
}

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

Значения

ЗначениеОписаниеПопробуйте
autoЗанимает одну строку. Точное размещение зависит от правил автоматического размещения сетки. Это значение по умолчанию.Попробуйте »
<line>Задаёт номер или имя линии, с которой должен начинаться элемент.Попробуйте »
initialУстанавливает для свойства значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

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

Советы и распространённые ошибки

  • Отрицательные номера линий отсчитываются с конца. grid-row-start: -1 указывает на последнюю линию строки, что удобно для привязки элемента к нижней части явно заданной сетки.
  • auto — не то же самое, что 1. auto передаёт размещение алгоритму автоматического размещения сетки, тогда как 1 всегда фиксирует элемент на линии первой строки.
  • Явно размещённые элементы могут оставлять пробелы. Привязка элемента к конкретной линии может смещать другие элементы и создавать пустые ячейки в зависимости от grid-auto-flow.
  • Для ясности задавайте соответствующую конечную линию. Когда вы управляете началом с помощью grid-row-start, явное указание grid-row-end (или использование сокращения grid-row) делает охват элемента очевидным и упрощает поддержку кода.

Поддержка браузерами

grid-row-start является частью CSS Grid Layout и поддерживается во всех современных браузерах — Chrome, Firefox, Safari и Edge.

Связанные свойства

  • grid-row — сокращение для grid-row-start и grid-row-end.
  • grid-row-end — задаёт конечную (блочную конечную) линию элемента.
  • grid-column-start — горизонтальный аналог данного свойства.
  • grid-template-rows — определяет строки (и именованные линии), на которые ссылается grid-row-start.

Практика

Практика
Что задаёт свойство grid-row-start в CSS?
Что задаёт свойство grid-row-start в CSS?
Was this page helpful?