1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
---
title: Subgrid
slug: Web/CSS/CSS_Grid_Layout/Subgrid
translation_of: Web/CSS/CSS_Grid_Layout/Subgrid
---
<p>{{CSSRef}}</p>
<p>2 уровень спецификации CSS Grid включает в себя значение <code>subgrid</code> для свойств <a href="/ru/docs/Web/CSS/grid-template-columns">grid-template-columns</a> и <a href="/ru/docs/Web/CSS/grid-template-rows">grid-template-rows</a>. Это руководство содержит описание принципа работы subgrid и показывает некоторые примеры использования этой функции.</p>
<div class="blockIndicator warning">
<p><strong>Важно</strong>: Эта функция поставляется с Firefox 71, являющимся в данный момент единственным браузером, в котором реализован subgrid.</p>
</div>
<h2 id="Введение_в_subgrid">Введение в subgrid</h2>
<p>При добавлении grid-контейнеру объявления <code>display: grid</code>, только непосредственно дочерние элементы становятся grid-элементами и могут быть помещены в созданную сетку. А дети этих grid-элементов отображаются уже в обычном потоке.</p>
<p>Вы можете "вкладывать" сетки, делая grid-элементы grid-контейнерами. Эти вложенные сетки, однако, не зависят от родителя и друг от друга, а это значит, что они не берут размер своих треков из родительской сетки. Это затрудняет выстраивание элементов вложенных сеток в соответствии с основной.</p>
<p>Если вы устанавливаете значение <code>subgrid</code> для свойства <code>grid-template-columns</code>, <code>grid-template-rows</code>, или для обоих, вместо создания новых треков, вложенная сетка использует треки, определённые для родителя.</p>
<p>Например, если вы используете <code>grid-template-columns: subgrid</code> и вложенная сетка охватывает три колоночных трека родителя, её треки будут такого же размера, как и у родительской сетки. Промежутки (<a href="/en-US/docs/Web/CSS/gap">gap</a>) наследуются, но могут быть переопределены другими значениями. Имена линий могут быть переданы от родителя в subgrid, но можно объявить также и свои собственные.</p>
<h2 id="Subgrid_для_колонок">Subgrid для колонок</h2>
<p>В примере ниже приведена сетка с девятью колонками шириной <code>1fr</code>, и четырьмя строками высотой минимум 100px. </p>
<p>Я изменяю позиционирование элемента с классом <code>.item</code> от 2 к 7 линии колонки и от 2 к 4 линии строки. После чего превращаю этот grid-элемент в grid-контейнер, определяя колоночные треки как subgrid, а строки оставляя обычными. Поскольку данный элемент охватывает пять колоночных треков, то и subgrid имеет пять колоночных треков. Затем я могу поместить на сетку элемент <code>.subitem</code>.</p>
<p>Строки в примере не являются subgrid, поэтому ведут себя как у обычной вложенной сетки. Grid-область родителя расширяется, чтобы стать достаточно большой для этой вложенной сетки.</p>
<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/columns.html", '100%', 1200)}}</p>
<p>Обратите внимание, что внутри subgrid нумерация линий не наследуется от родителя, а начинается по новой – колоночная линия 1 внутри subgrid всегда является его начальной линией. Это значит, что вы можете безопасно добавить компонент, который может быть помещен в разных позициях на главной сетке, зная, что номера линий внутри компонента всегда будут оставаться одинаковыми.</p>
<h2 id="Subgrid_для_строк">Subgrid для строк</h2>
<p>Следующий пример повторяет предыдущий, только в этот раз мы используем <code>subgrid</code> как значение свойства <code>grid-template-rows</code> и явно определяем колоночные треки. Таким образом, колоночный трек ведёт себя как обычная вложенная сетка, но строки привязаны к двум трекам, которые охватывает дочерний элемент.</p>
<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/rows.html", '100%', 1200)}}</p>
<h2 id="Subgrid_в_обоих_измерениях">Subgrid в обоих измерениях</h2>
<p>Конечно, вы можете определить и строки и колонки как subgrid, как в примере ниже. Это значит, что ваш subgrid в обоих измерениях привязан к количеству треков родителя.</p>
<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/both.html", '100%', 1200)}}</p>
<h3 id="В_subgrid-измерении_отсутствует_неявная_сетка">В subgrid-измерении отсутствует неявная сетка</h3>
<p>Если вам нужно автоматическое размещение элементов и неизвестно их будущее количество, будьте внимательны при создании subgrid, поскольку это заблокирует функцию создания дополнительных строк для размещения этих элементов.</p>
<p>Взгляните на следующий пример – в нём используется такая же родительская и дочерняя сетка, как в примере выше, однако внутри subgrid присутствует двенадцать элементов, пытающихся автоматически разместиться в десяти grid-ячейках. Так как subgrid задан в обоих измерениях, двум дополнительным элементам некуда деться, поэтому они размещаются в последнем треке сетки, что и определено спецификацией.</p>
<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/no-implicit.html", '100%', 1200)}}</p>
<p>Если удалить значение свойства <code>grid-template-rows</code>, мы включим обычное создание неявных треков и, хотя они не выстроятся по сетке родителя, будет создано столько треков, сколько потребуется.</p>
<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/implicit.html", '100%', 1200)}}</p>
<h2 id="Subgrid_и_свойства_gap">Subgrid и свойства gap</h2>
<p>Если у родителя задан <a href="/en-US/docs/Web/CSS/gap">gap</a>, <a href="/en-US/docs/Web/CSS/column-gap">column-gap</a> или <a href="/en-US/docs/Web/CSS/row-gap">row-gap</a>, это будет передано и в subgrid, поэтому он будет иметь такие же промежутки между треками, как и родитель. Тем не менее, в определённых ситуациях вы можете захотеть, чтобы промежутки между треками в subgrid отличались или отсутствовали вовсе. Этого можно достичь, определяя свойства <code>gap–*</code> непосредственно в subgrid.</p>
<p>Вы можете видеть это в примере ниже. Родительский grid имеет промежутки 20px для строк и колонок. Subgrid имеет <code>row-gap</code> со значением <code>0</code>.</p>
<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/gap.html", '100%', 1200)}}</p>
<p>Если вы откроете Firefox Grid Inspector, сможете увидеть, как линия сетки находится в правильном месте по центру промежутка, поэтому когда мы устанавливаем gap = 0, он действует аналогично применению отрицательного margin для элемента, создавая пространство от промежутка обратно до элемента.</p>
<p><img alt="The smaller item displays in the gap as row-gap is set to 0 on the subgrid." src="https://mdn.mozillademos.org/files/16628/gap.png" style="height: 928px; width: 1312px;"></p>
<h2 id="Именованные_grid-линии">Именованные grid-линии</h2>
<p>При использовании CSS Grid, вы можете именовать линии сетки и затем позиционировать элементы, используя эти имена, а не номера линий. Имена линий у родительской сетки передаются в subgrid, что позволяет с их помощью позиционировать элементы. В примере ниже я назвала линии родителя <code>col-start</code> и <code>col-end</code> и затем использовала их для размещения элементов subgrid..</p>
<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/line-names.html", '100%', 1200)}}</p>
<p>Также можно указывать имена линий для subgrid. Это достигается путём добавления списка имён линий, заключённого в квадратные скобки после ключевого слова <code>subgrid</code>. Если в subgrid имеется четыре линии, для именования их всех достаточно использовать синтаксис <code>grid-template-columns: subgrid [line1] [line2] [line3] [line4]</code>.</p>
<p>Имена линий, указанные в subgrid, добавляются к любым линиям, указанным в родительском элементе, поэтому можно использовать одно из этих названий или оба. Чтобы продемонстрировать это, в примере ниже я расположила один элемент, используя линии родителя, а другой – используя линии subgrid</p>
<p><br>
{{EmbedGHLiveSample("css-examples/grid/subgrid/adding-line-names.html", '100%', 1200)}}</p>
<h2 id="Использование_subgrid">Использование subgrid</h2>
<p>Не считая необходимости следить за элементами, которые могут не поместиться при автоматическом размещении, subgrid работает аналогично любой вложенной сетке; единственное отличие заключается в том, что размер трека у subgrid задаётся в родительской сетке. Однако, как и в случае с любой вложенной сеткой, размер содержимого в subgrid может изменить размер трека, если конечно содержимому позволено влиять на размер.</p>
<p>Поскольку значение subgrid во многом работает так же, как и обычная вложенная сетка, между ними достаточно легко переключаться. Например, если вы понимаете, что нужна неявная сетка для строк, всё что нужно сделать, удалить значение <code>subgrid</code> для свойства <code>grid-template-rows</code> и, возможно, задать значение свойству <code>grid-auto-rows</code> для контроля размера неявных треков.</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li>На YouTube-канале Mozilla Developers смотрите видео <a href="https://www.youtube.com/watch?v=gmQlK3kRft4">Laying out forms using subgrid</a> и <a href="https://www.youtube.com/watch?v=lLnFtK1LNu4">Don't Wait To Use Subgrid For Better Card Layouts</a></li>
<li><a href="https://noti.st/rachelandrew/i6gUcF/hello-subgrid">Hello Subgrid!</a> Презентация с CSSConf.eu</li>
</ul>
<h2 id="Спецификация">Спецификация</h2>
<table>
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS Grid 2")}}</td>
<td>{{Spec2("CSS Grid 2")}}</td>
<td>Изначально определение <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Subgrid">subgrids</a>.</td>
</tr>
</tbody>
</table>
|
