From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/grid-row-start/index.html | 230 +++++++++++++++++++++++++++++ 1 file changed, 230 insertions(+) create mode 100644 files/ru/web/css/grid-row-start/index.html (limited to 'files/ru/web/css/grid-row-start/index.html') diff --git a/files/ru/web/css/grid-row-start/index.html b/files/ru/web/css/grid-row-start/index.html new file mode 100644 index 0000000000..99db2ff61d --- /dev/null +++ b/files/ru/web/css/grid-row-start/index.html @@ -0,0 +1,230 @@ +--- +title: grid-row-start +slug: Web/CSS/grid-row-start +translation_of: Web/CSS/grid-row-start +--- +

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

+ +
{{EmbedInteractiveExample("pages/css/grid-row-start.html")}}
+ + + +

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:

+ + + +

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 {{cssxref("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

+ +
{{csssyntax}}
+ +

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;
+}
+
+ + + +

{{ EmbedLiveSample('Examples', '230', '420') }}

+ + + +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Grid", "#propdef-grid-row-start", "grid-row-start")}}{{Spec2("CSS3 Grid")}}Initial definition
+ +

{{cssinfo}}

+ +

Browser compatibility

+ + + + + +

{{Compat("css.properties.grid-row-start")}}

+ + + +

See also

+ + + + -- cgit v1.2.3-54-g00ecf