grid-row-start
==============

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
Свойство CSS **`grid-row-start`** определяет начальную позицию элемента грид в строке, добавляя линию, span или ничего (автоматически) к его расположению в сетке, тем самым определяя начальный край inline-элемента его grid area (en-US).

Интерактивный пример
--------------------

Syntax
------


```css
/\* 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', он вносит первую такую строку в размещение элемента сетки.

**Примечание:** 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-row-start =   
  <grid-line>    
  
<grid-line> =   
  auto                                                | (en-US)  
  <custom-ident>                                      | (en-US)  
  [ (en-US) [ (en-US) <integer [-∞,-1]> | (en-US) <integer [1,∞]> ] (en-US) && (en-US) <custom-ident>? (en-US) ] (en-US)  | (en-US)  
  [ (en-US) span && (en-US) [ (en-US) <integer [1,∞]> || (en-US) <custom-ident> ] (en-US) ] (en-US)     
  
```

Examples
--------


```html
<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>
```



```css
.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;
}
```


```
\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.nested {
  border: 2px solid #ffec99;
  border-radius: 5px;
  background-color: #fff9db;
  padding: 1em;
}
```

Specifications
--------------

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # line-placement |

|  |  |
| --- | --- |
| Начальное значение | `auto` |
| Применяется к | элементы сетки и абсолютно-позиционированные блоки, находящиеся в сеточном контейнере |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | discrete |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Related CSS properties: `grid-row-end` (en-US), `grid-row` (en-US), `grid-column-start` (en-US), `grid-column-end` (en-US), `grid-column`
* Grid Layout Guide: *Line-based placement with CSS Grid*
* Video tutorial: *Line-based placement*