grid-row-start

Этот перевод не завершён. Пожалуйста, помогите перевести эту статью с английского

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

Syntax

/* Keyword value */
grid-row-start: auto;

/* <custom-ident> values */
grid-row-start: somegridarea;

/* <integer> + <custom-ident> values */
grid-row-start: 2;
grid-row-start: somegridarea 4;

/* span + <integer> + <custom-ident> values */
grid-row-start: span 3;
grid-row-start: span somegridarea;
grid-row-start: 5 somegridarea span;

/* Global values */
grid-row-start: inherit;
grid-row-start: initial;
grid-row-start: unset;

This property is specified as a single <grid-line> value. A <grid-line> value can be specified as:

  • either the auto keyword
  • or a <custom-ident> value
  • or an <integer> value
  • or both <custom-ident> and <integer>, separated by a space
  • or the keyword span together with either a <custom-ident> or an <integer> or both.

Values

auto
Ключевое слово, указывающее, что свойство никак не влияет на размещение элемента сетки, обозначающее автоматическое размещение, автоматический диапазон или диапазон по умолчанию, равный 1.
<custom-ident>
Если есть именованная строка с именем '<custom-ident>-start', он вносит первую такую ​​строку в размещение элемента сетки.

Note: Named grid areas automatically generate implicit named lines of this form, so specifying grid-row-start: foo; will choose the start edge of that named grid area (unless another line named foo-start was explicitly specified before it).

В противном случае это обрабатывается так, как если бы целое число 1 было указано вместе с <custom-ident>.

<integer> && <custom-ident>?
Вносит n-ю линию сетки в размещение элемента сетки. Если задано отрицательное целое число, вместо этого начинается обратный отсчет, начиная с конечного края явной сетки. Если имя задано как <custom-ident>, подсчитываются только строки с этим именем. Если существует недостаточно строк с таким именем, предполагается, что все неявные линии сетки имеют это имя для нахождения этой позиции.

An integer value of 0 is invalid.

span && [ <integer> || <custom-ident> ]
Contributes a grid span to the grid item’s placement; such that the row start edge of the grid item’s grid area is n lines from the end edge.

If a name is given as a <custom-ident>, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid, corresponding to the search direction, are assumed to have that name for the purpose of counting this span.

If the <integer> is omitted, it defaults to 1. Negative integers or 0 are invalid.

The <custom-ident> cannot take the span value.

Formal syntax

<grid-line>

где
<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]

Examples

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
</div>
.wrapper { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  grid-auto-rows: 100px; 
} 

.box1 { 
  grid-column-start: 1; 
  grid-column-end: 4; 
  grid-row-start: 1; 
  grid-row-end: 3; 
}

.box2 { 
  grid-column-start: 1; 
  grid-row-start: 3; 
  grid-row-end: 5; 
}

Specifications

Specification Status Comment
CSS Grid Layout
Определение 'grid-row-start' в этой спецификации.
Кандидат в рекомендации Initial definition
Начальное значениеauto
Применяется кэлементы сетки и абсолютно-позиционированные блоки, находящиеся в сеточном контейнере
Наследуетсянет
Обработка значениякак указано
Animation typediscrete

Browser compatibility

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
grid-row-startChrome Полная поддержка 57
Полная поддержка 57
Полная поддержка 29
Отключено
Отключено From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Полная поддержка 16Firefox Полная поддержка 52
Полная поддержка 52
Нет поддержки 40 — 59
Отключено
Отключено From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка 44
Полная поддержка 44
Полная поддержка 28
Отключено
Отключено From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Полная поддержка 10.1WebView Android Полная поддержка 57Chrome Android Полная поддержка 57
Полная поддержка 57
Полная поддержка 29
Отключено
Отключено From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Полная поддержка 52
Полная поддержка 52
Нет поддержки 40 — 59
Отключено
Отключено From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка 43
Полная поддержка 43
Полная поддержка 28
Отключено
Отключено From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS Полная поддержка 10.3Samsung Internet Android Полная поддержка 6.0

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.

See also