-
Notifications
You must be signed in to change notification settings - Fork 791
Expand file tree
/
Copy pathOverview.bs
More file actions
829 lines (709 loc) · 32.4 KB
/
Overview.bs
File metadata and controls
829 lines (709 loc) · 32.4 KB
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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
<pre class='metadata'>
Title: CSS Grid Layout Module Level 2
Shortname: css-grid
Level: 2
Status: ED
Group: csswg
Work Status: exploring
TR: https://www.w3.org/TR/css-grid-2/
ED: https://drafts.csswg.org/css-grid-2/
Previous version: https://www.w3.org/TR/2018/WD-css-grid-2-20180628/
Editor: Tab Atkins Jr., Google, http://www.xanthir.com/contact/, w3cid 42199
Editor: Elika J. Etemad / fantasai, Invited Expert, http://fantasai.inkedblade.net/contact, w3cid 35400
Editor: Rossen Atanassov, Microsoft, ratan@microsoft.com, w3cid 49885
Abstract: This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid. Level 2 expands Grid by adding “subgrid” capabilities for nested grids to participate in the sizing of their parent grids; and aspect-ratio–controlled gutters.
</pre>
Introduction {#intro}
=====================
This level is currently maintained as a diff spec over the level 1 module [[!CSS-GRID-1]].
The main addition to Level 1 is the “subgrid” feature:
a subgridded axis is one which matches up its grid lines
to lines in the element's parent's grid,
and which derives the sizes of its tracks
through this integration with the parent grid.
In general, the behavior of subgrids are the same in both proposals:
it is only a question of whether a single-axis subgrid is possible.
Issue: The full text of the Grid specification will be folded in when this draft reaches CR.
<!--
██████ ██ ██ ████████ ██████ ████████ ████ ████████
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██████ ██ ██ ████████ ██ ████ ████████ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██████ ███████ ████████ ██████ ██ ██ ████ ████████
-->
<h2 id="subgrids">
Subgrids</h2>
A <a>grid item</a> can itself be a <a>grid container</a> by giving it ''display: grid'';
in this case the layout of its contents will be independent of the layout of the grid it participates in.
In some cases it might be necessary for the contents of multiple <a>grid items</a> to align to each other.
A <a>grid container</a> that is itself a <a>grid item</a>
can defer the definition of its rows and columns to its parent <a>grid container</a>,
making it a <dfn export>subgrid</dfn>.
In this case, the <a>grid items</a> of the <a>subgrid</a>
participate in sizing the <a>grid</a> of the parent <a>grid container</a>,
allowing the contents of both grids to align.
<div class="example">
For example, suppose we have a form consisting of a list of inputs with labels:
<pre class="lang-html">
<ul>
<li><label>Name:</label> <input name=fn>
<li><label>Address:</label> <input name=address>
<li><label>Phone:</label> <input name=phone>
</ul>
</pre>
We want the labels and inputs to align, and we want to style each list item with a border.
This can be accomplished with subgrid layout:
<pre>
ul {
display: grid;
grid: auto-flow / auto 1fr;
}
li {
grid-column: span 2;
display: grid;
grid-template-columns: subgrid;
border: solid;
}
label {
grid-column: 1;
}
input {
grid-column: 2;
}
</pre>
</div>
<h3 id="subgrid-per-axis">
Establishing a Subgrid</h3>
<a>Subgrids</a> provide the ability to pass grid parameters down through nested elements,
and content-based sizing information back up to their parent grid.
<pre class="propdef">
Name: grid-template-rows, grid-template-columns
New values: subgrid <<line-name-list>>?
</pre>
<dl dfn-for="grid-template-rows, grid-template-columns" dfn-type=value>
<dt><dfn id="subgrid-listing">subgrid <<line-name-list>>?</dfn>
<dd>
The <dfn value for="grid-template-rows, grid-template-columns">subgrid</dfn> value
indicates that the grid will adopt the spanned portion of its parent grid in that axis.
Rather than being specified explicitly,
the sizes of the grid rows/columns
will be taken from the parent grid's definition,
and the <a>subgrid</a>’s items will participate
in the <a href="https://www.w3.org/TR/css-grid-1/#algo-content">intrinsic size calculations</a> ([[css-grid-1#algo-content]])
of any tracks shared with the parent grid.
The <<line-name-list>> argument allows local naming of the grid lines propagated from the parent grid:
if a <<line-name-list>> is given,
the specified <<line-names>>s are assigned to
8000
the subgrid’s <a>explicit grid lines</a>,
one per line, starting with line 1.
Excess <<line-names>> are ignored.
If there is no parent grid,
this value is equivalent to
the initial value, ''grid-template-rows/none''.
</dl>
Unlike those of a regular nested grid,
a subgrid’s contents participate in its parent <a>grid formatting contex</a>;
thus a subgrid does not establish an <a>independent formatting context</a>.
The syntax of <<line-name-list>> is defined as follows:
<pre class="prod">
<dfn><line-name-list></dfn> = [ <<line-names>> | <<name-repeat>> ]+
<dfn><line-names></dfn> = '[' <<custom-ident>>* ']'
<dfn><name-repeat></dfn> = repeat( [ <<positive-integer>> | auto-fill ], <<line-names>>+)
</pre>
The <<name-repeat>> variant of the ''repeat()'' notation
<!-- is for adding line names to <a href="#subgrids">subgrids</a> and -->
can only be used with the ''grid-template-rows/subgrid'' keyword:
it only repeats names.
The ''auto-fill'' keyword is only valid once per <<line-name-list>>,
and repeats enough times for the name list to match the subgrid’s specified <a>grid span</a>
(falling back to 0 if the span is already fulfilled).
<h3 id="subgrid-items">
Characteristics of a Subgrid Item</h3>
A <a>subgrid</a> behaves just like a normal <a>grid container</a> except that:
<ul style="list-style-type: lower-alpha">
<li id="subgrid-tracks">
Placing the <a>subgrid</a>
creates a correspondence between its subgridded tracks
and those that it spans in its parent grid.
The grid lines thus shared between the subgrid and its parent
form the subgrid’s <a>explicit grid</a>,
and its track sizes are governed by the parent grid.
<li id="subgrid-span">
The number of explicit tracks in the <a>subgrid</a>
in a subgridded dimension
always corresponds to the number of <a>grid tracks</a>
that it spans in its parent <a>grid</a>:
<ul>
<li>
If the <a>subgrid</a>’s <a>grid span</a> in the subgridded dimension is definite,
then the number of explicit tracks in each subgridded dimension
is taken from its used <a>grid span</a> in that dimension
(regardless of its 'grid-template-*' properties).
<li>
If it has an <a>indefinite grid span</a>
(i.e. either the '-start' or '-end' value
of its <a>grid-placement properties</a> in the subgridded axis
is ''grid-row-start/auto'')
then its used <a>grid span</a> is taken
from the number of explicit tracks specified for that axis
by its 'grid-template-*' properties,
floored at one.
</ul>
<li id="subgrid-indexing">
The <a>grid-placement properties</a> of the <a>subgrid</a>’s <a>grid items</a>
and the line numbers they use
are scoped to the lines covered by the subgrid,
exactly consistent with the lines outside the subgrid
being excluded from its <a>explicit grid</a>.
E.g. numeric indices count starting from the first line of the subgrid
rather than the first line of the parent grid.
Line numbering and placement rules
obey the subgrid’s own <a>writing mode</a>,
just as they would for a nested independent grid.
<li id="subgrid-line-name-inheritance">
Since <a>subgrids</a> can be placed before their contents are placed,
the subgridded lines
automatically receive the line names
specified on the corresponding lines of the parent <a>grid</a>.
This includes any <a lt="implicit named lines">implicit names</a>
added by the 'grid-template-areas' property of the parent grid
(but does not include the infinite unspecified names
assumed on its <a>implicit grid lines</a>
to resolve placement against named lines
that don't exist in the <a>explicit grid</a>).
These names are in <em>addition</em> to
any line names specified locally on the subgrid.
<li id="subgrid-implicit">
The <a>subgrid</a> does not have any <a>implicit grid tracks</a>
in the subgridded dimension(s).
Hypothetical <a>implicit grid lines</a> are used to resolve placement
as usual when the <a>explicit grid</a> does not have enough lines;
however
each <a>grid item</a>’s <a>grid area</a>
is <a>clamped</a> to the subgrid’s <a>explicit grid</a>
(using the same procedure as for clamping placement in an overly-large grid).
<div class="example">
For example, if a ''span 1'' subgrid has a <a>grid item</a> with ''grid-column: 2 / span 3;'',
then that item is instead forced into (and limited to) the first (only) track in the subgrid.
</div>
<li id="subgrid-size-contribution">
The <a>subgrid</a> itself lays out as an ordinary <a>grid item</a> in its parent grid,
but acts as if it was completely empty for track sizing purposes
in the subgridded dimension.
<li id="subgrid-item-contribution">
The <a>subgrid</a>'s own <a>grid items</a> participate
in the sizing of its parent grid in the subgridded dimension(s)
and are aligned to it in those dimensions.
<p id="subgrid-margins">
In this process, the sum of the <a>subgrid</a>'s
margin, padding, and borders at each edge
are applied as an extra layer of (potentially negative) margin
to the items at those edges.
This extra layer of “margin” accumulates
through multiple levels of subgrids.
<div class="example">
For example, if we have a 3×3 grid with the following tracks:
<pre>#parent-grid { grid-template-columns: 300px auto 300px; }</pre>
If a subgrid covers the last two tracks,
its first two columns correspond to the parent grid's last two columns,
and any items positioned into those tracks participate in sizing the parent grid.
Specifically, an item positioned in the first track of the subgrid
influences the auto-sizing of the parent grid's middle track.
<pre>
#subgrid { grid-column: 2 / span 2; } /* cover parent's 2nd and 3rd tracks */
#subgrid > :first-child { grid-column: 1; } /* subgrid's 1st track, parent grid's 2nd track */
</pre>
If the subgrid has margins/borders/padding,
the size of those margins/borders/padding also influences sizing.
For example, if the subgrid has 100px padding:
<pre>#subgrid { padding: 100px; }</pre>
Then a <a>grid item</a> in the <a>subgrid's</a> first track
acts as if it has an additional ''100px'' of top, left, and bottom margin,
influencing the sizing of the parent grid's tracks
and the <a>grid item's</a> own position.
</div>
<p id="subgrid-gaps">
Meanwhile,
half the size of the difference between
the subgrid’s <a>gutters</a> ('row-gap'/'column-gap')
and its parent grid’s <a>gutters</a>
is applied as an extra layer of (potentially negative) margin
to the items not at those edges.
This extra layer of “margin” also accumulates
through multiple levels of subgrids.
A value of ''row-gap/normal''
indicates that the subgrid has the same size <a>gutters</a>
as its parent grid,
i.e. the applied difference is zero.
Note: The end result will be that the parent’s grid tracks
will be sized as specified,
and that the subgrid’s gaps will visually center-align
with the parent grid’s gaps.
<div class="example">
<p>For example,
suppose we have a 300px-wide outer grid
with 50px gaps
and its columns specified as ''100px 1fr''.
A subgrid spanning both tracks would have…
<dl>
<dt>… if its 'column-gap' were ''column-gap/normal'' (or ''50px''):
<dd>
<ul>
<li>A grid item in its left column
sized and laid out
(and contributing its size to the parent grid’s sizing calculations)
without any special adjustment,
thus stretching to 100px wide
while remaining aligned
to the subgrid’s left edge.
<li>A grid item in its right column
sized and laid out
(and contributing its size to the parent grid’s sizing calculations)
without any special adjustment,
thus stretching to 150px wide,
while remaining aligned
to the subgrid’s right edge.
<li>An effective visual <a>gutter</a> between the items
of 50px, exactly matching its parent grid.
</ul>
<img src="images/subgrid-gap-normal.png" alt="">
<dt>… if its 'column-gap' were ''0'':
<dd>
<ul>
<li>A grid item in its left column
sized and laid out
(and contributing its size to the parent grid’s sizing calculations)
as if it had a -25px right margin,
thus stretching to 125px wide
while remaining aligned
to the subgrid’s left edge.
<li>A grid item in its right column
sized and laid out
(and contributing its size to the parent grid’s sizing calculations)
as if it had a -25px left margin,
thus stretching to 175px wide,
while remaining aligned
to the subgrid’s right edge.
<li>An effective visual <a>gutter</a> between the items
of zero, as specified by its 'column-gap'.
</ul>
<img src="images/subgrid-gap-0px.png" alt="">
<dt>… if its 'column-gap' were ''25px'':
<dd>
<ul>
<li>A grid item in its left column
sized and laid out
(and contributing its size to the parent grid’s sizing calculations)
as if it had a -12.5px right margin,
thus stretching to 112.5px wide
while remaining aligned
to the subgrid’s left edge.
<li>A grid item in its right column
sized and laid out
(and contributing its size to the parent grid’s sizing calculations)
as if it had a -12.5px left margin,
thus stretching to 162.5px wide,
while remaining aligned
to the subgrid’s right edge.
<li>An effective visual <a>gutter</a> between the items
of 25px, as specified by its 'column-gap'.
</ul>
<img src="images/subgrid-gap-25px.png" alt="">
<dt>… if its 'column-gap' were ''75px'':
<dd>
<ul>
<li>A grid item in its left column
sized and laid out
(and contributing its size to the parent grid’s sizing calculations)
as if it had a 12.5px right margin,
thus stretching to 87.5px wide
while remaining aligned
to the subgrid’s left edge.
<li>A grid item in its right column
sized and laid out
(and contributing its size to the parent grid’s sizing calculations)
as if it had a 12.5px left margin,
thus stretching to 137.5px wide,
while remaining aligned
to the subgrid’s right edge.
<li>An effective visual <a>gutter</a> between the items
of 75px, as specified by its 'column-gap'.
</ul>
<img src="images/subgrid-gap-75px.png" alt="">
</dl>
</div>
<li id="subgrid-edge-placeholders">
For each edge of a non-empty subgrid,
to account for the subgrid’s margin/border/padding at that edge,
a hypothetical item is contributed to the track sizing algorithm
for each span size
in the set of items spanning into
the occupied track closest to that edge of the subgrid.
This item’s sizes are taken from the sizes of the largest such item
of each span size,
and are additionally inflated by the subgrid’s own margin/border/padding
at that edge (or both edges,
if it happens to be the most extreme item on both sides
and is also the smallest span size).
Similarly, the hypothetical item’s span is taken
from that same real item’s span,
and inflated by the number of empty tracks between it
and the relevant subgrid’s edge(s).
Note: This step can be shortcut if
the tracks closest to the subgrid’s edges contain real items,
which would have already
<a href="#subgrid-item-contribution">accounted for the subgrid’s margin/border/padding</a>
as described above.
<div class="example">
For example, in the following subgrid layout:
<pre>
5px auto auto 5px
. aaaaaaaaa .
. bbbb cccc .
</pre>
Assuming subgrid items <var>a</var>, <var>b</var>, and <var>c</var>
occupying their corresponding grid areas
and a subgrid padding of 25px,
two hypothetical grid items would be contributed
to the track sizing algorithm
for the purpose of handling the subgrid’s inline-start padding:
one with the size of <var>b</var> plus 25px,
spanning the first two columns;
and one with the size of <var>a</var> plus 25px,
spanning the first three columns.
If only item <var>a</var> existed,
which would make it both
span into the closest occupied columns on both sides
and be the smallest-spanning item on each side,
then the hypothetical item it contributes
would be its size inflated by 50px
and would span all four columns.
</div>
<li id="subgrid-box-alignment">
The <a>subgrid</a> is always stretched in its subgridded dimension(s:
the 'align-self'/'justify-self' properties on it are ignored,
as are any specified width/height constraints.
<li id="subgrid-grid-alignment">
Layoutwise, the <a>subgrid</a>’s <a>grid</a>
is always aligned with the corresponding section of the parent <a>grid</a>;
the 'align-content'/'justify-content' properties on it are also ignored
in the subgridded dimension.
<li id="subgrid-overflow">
The 'overflow' property does apply to <a>subgrids</a>,
so that overflowing contents of the subgrid can be scrolled into view.
(Note: the act of scrolling does not affect layout.)
</ul>
<h3 id="subgrid-sizing">
Subgrid Sizing Algorithm</h3>
Note: Placement of all grid items,
including subgrids and their sub-items,
occurs before sizing.
Track sizing in a subgridded dimension
treats each item in a given track in that axis
as members of the parent grid.
This interlacing requires that grid sizing
drills down per axis into subgrids,
rather than completing both axes in its recursion.
Thus the <a href="https://www.w3.org/TR/css-grid-1/#algo-overview">Grid Sizing Algorithm</a>
is modified as follows:
<blockquote>
<ol>
<li>
First, the <a>track sizing algorithm</a> is used to resolve the sizes of the <a>grid columns</a>.
In this process,
any <a>grid item</a> which is subgridded
in the <a>grid container</a>’s <a>inline axis</a>
is treated as empty
and its <a>grid items</a> (the grandchildren)
are treated as direct children of the <a>grid container</a> (their grandparent).
This introspection is recursive.
Items which are subgridded only in the <a>block axis</a>,
and whose <a>grid container</a> size in the <a>inline axis</a>
depends on the size of its contents
are also introspected:
since the size of the item in this dimension
can be dependent on the sizing of its subgridded tracks in the other,
the size contribution of any such item to this grid’s column sizing
(see <a href="https://www.w3.org/TR/css-grid-1/#algo-content">Resolve Intrinsic Track Sizes</a>)
is taken under the provision
of having determined its track sizing only up to the same point
in the Grid Sizing Algorithm as this parent grid itself.
E.g. for the first pass through this step,
the item will have its tracks sized only through this first step;
if a second pass of this step is triggered then
the item will have completed a first pass through steps 1-3
as well as the second pass of this step
prior to returning its size for consideration in this grid’s column sizing.
Again, this introspection is recursive.
If calculating the layout of a <a>grid item</a> in this step
depends on the <a>available space</a> in the <a>block axis</a>,
assume the <a>available space</a> that it would have
if any row with a <a>definite</a> <a>max track sizing function</a>
had that size and all other rows were infinite.
<li>
Next, the <a>track sizing algorithm</a> resolves the sizes of the <a>grid rows</a>,
using the <a>grid column</a> sizes calculated in the previous step.
In this process,
any <a>grid item</a> which is subgridded
in the <a>grid container</a>’s <a>block axis</a>
is treated as empty
and its <a>grid items</a> (the grandchildren)
are treated as direct children of the <a>grid container</a> (their grandparent).
This introspection is recursive.
As with sizing columns,
items which are subgridded only in the <a>inline axis</a>,
and whose <a>grid container</a> size in the <a>block axis</a>
depends on the size of its contents
are also introspected.
(As with sizing columns,
the size contribution to this grid’s row sizing
is taken under the provision
of having determined its track sizing
only up to this corresponding point in the algorithm;
and again, this introspection is recursive.)
<li>
Then, if the <a>min-content contribution</a> of any grid items have changed
based on the row sizes calculated in step 2,
steps 1 and 2 are repeated with the new <a>min-content contribution</a>
and <a>max-content contribution</a> (once only).
<div class="note">
This cycle is necessary for cases where the <a>inline size</a> of a <a>grid item</a>
depends on the <a>block size</a> of its <a>grid area</a>.
Examples include wrapped column <a>flex containers</a> (''flex-flow: column wrap''),
<a>orthogonal flows</a> ('writing-mode'),
and <a spec=css-multicol>multi-column containers</a>.
</div>
<li>
Finally, the <a>grid container</a> is sized
using the resulting size of the <a>grid</a> as its content size,
and the tracks are aligned within the <a>grid container</a>
according to the 'align-content' and 'justify-content' properties.
Note: This can introduce extra space between tracks,
potentially enlarging the grid area of any grid items spanning the gaps
beyond the space allotted to during track sizing.
</ol>
Once the size of each <a>grid area</a> is thus established,
the <a>grid items</a> are laid out into their respective containing blocks.
The <a>grid area’s</a> width and height are considered <a>definite</a> for this purpose.
Note: Since formulas calculated using only definite sizes,
such as the <a>stretch fit</a> formula,
are also definite,
the size of a grid item which is stretched
is also considered definite.
</blockquote>
Issue: Note, this means that a subgrid establishing an orthogonal flow
would have the order of its track sizing inverted compared to a nested grid.
We could simplify this by saying that an orthogonal flow
cannot establish a subgrid; it can only be a nested grid.
<div class="example">
The following example illustrates how per-axis subgrids are sized:
Suppose we have a parent grid container <var>A</var>
which contains an item <var>B</var> that has subgridded columns
and contains a grandchild <var>B</var> that has subgridded rows
and grandchild <var>D</var> that is simply a nested grid.
<xmp>
<grid-A>
<grid-B subgrid=columns>
<grid-C subgrid=rows/>
<grid-D>
</grid-B>
<grid-A>
</xmp>
When <var>A</var> sizes its columns
it treats <var>B</var>'s items
as slotted into to <var>A</var>'s corresponding columns,
but when <var>A</var> sizes its rows
it treates <var>B</var> as a single item
(a grid container with its own rows and some items including items <var>C</var> and <var>D</var>).
Similarly when <var>B</var> sizes its rows,
it treats <var>C</var>'s items as slotted into <var>B</var>'s rows,
but when <var>B</var> sizes its columns,
it treats <var>C</var> as a single item,
just as it does with <var>D</var>.
There is no relationship between <var>C</var>'s rows and <var>A</var>'s rows,
because the rows in <var>B</var> are nested, not subgridded.
At a high level, the grid algorithm is:
<ol>
<li>Size the columns
<li>Size the rows
<li>Adjust the columns (if needed based on final row sizes)
</ol>
The grid sizing algorithm in this example would thus look like this:
<ol>
<li>
<strong>Resolve sizes of <var>A</var>’s grid columns,
using the sizes of <var>A</var>’s grid items,
treating <var>B</var> as empty
but treating its children
(including <var>C</var> and <var>D</var>)
as items in grid <var>A</var>.</strong>
The grid algorithm simply recurses into <var>D</var>.
For <var>C</var>, it's more complicated:
<ol>
<li>Size <var>C</var>'s columns.
<li>Size <var>C</var>'s rows by sizing <var>B</var>'s rows.
<li>Adjust <var>C</var>'s columns.
<li>Return <var>C</var>'s final column sizes.
</ol>
A correct size for <var>B</var>'s rows
requires <var>C</var>'s final column sizes,
because the row size depends on the column size,
and thus <var>B</var>'s rows could very well depend
on <var>C</var>'s final column sizes.
To break this cyclic dependency,
we need to split the algorithm to depend on
the initial approximation of <var>C</var>'s final column sizes,
and do the adjustment pass later.
So for <var>C</var>, we need to recurse into column sizing only,
and pass that initial size up to <var>A</var>
for its initial column sizing.
When we size <var>B</var>'s rows later on,
we will size <var>C</var>'s rows (which are subgridded),
and finish up <var>C</var>'s sizing by finalizing its columns.
If this resulted in a change, we have the opportunity
to trigger an adjustment pass for <var>A</var>'s columns
during its adjustment pass.
<li>
<strong>Next, resolve sizes of <var>A</var>'s rows,
using the sizes of <var>A</var>’s grid items,
treating <var>B</var> as a single item.</strong>
Since <var>B</var>, as a subgrid,
has its sizing is split out into the multiple passes,
the grid algorithm issues only a row-sizing recursion into <var>B</var>:
Size <var>B</var>’s rows, treating D as a single item, requesting its final size,
and treating <var>C</var> as an empty item
and hoisting its children as items into grid <var>B</var>.
<var>B</var> returns its final row size,
which factors into <var>A</var>’s row sizing pass.
<li>
<strong>Last, finalize <var>A</var>’s column sizes.</strong>
If <var>C</var>’s final size changes
as a result of the row-sizing pass through <var>B</var>,
this should trigger a resizing of <var>B</var>’s columns,
which should trigger a resizing pass on <var>A</var>’s column.
</ol>
</div>
<h2 id=alignment>
Aspect-ratio–controlled Gutters</h2>
Issue: There's a desire for having row and column gaps maintain a particular aspect ratio.
This is one proposal for doing so; other ideas are welcome.
See discussion in <a href="https://github.com/w3c/csswg-drafts/issues/1116">Issue 1116</a>.
Note this feature is likely to move to css-align-4,
it is just being drafted up here while css-align-3 stabilizes.
<pre class="propdef">
Name: align-content, justify-content
New values: [ <<transfer-ratio>> <<content-distribution>>? ]
</pre>
<dl dfn-for="align-content,justify-content" dfn-type=value>
<dt><dfn><transfer-ratio></dfn>
<dd>
A <a spec="css-values">dimension</a> with the unit ''tr'',
representing a multiplier against the analogous quantity
in the other dimension.
If that quantity cannot be determined
(e.g. is itself specified as a <<aspect-ratio>>, or otherwise can't be referenced),
then it is assumed to be zero.
Note: This value can expand gutters
even when there is no free space left,
causing overflow.
Specifically, an 'align-content' value of ''1tr'' represents
the amount of space (which may be zero) allocated between two adjacent
<a>alignment subjects</a> (<a>grid tracks</a> / <a>flex lines</a> / <a spec="css-multicol">column boxes</a>)
by the 'justify-content' property.
Unless a different <<content-distribution>> value is specified,
space is distributed according to the same <<content-distribution>> rules
as for 'justify-content'.
The behavior of <<number>> values for 'justify-content' is analogous.
Note: The space allocated by ''align-content: 1tr'' will be zero
if 'justify-content' does not allocate space
between adjacent <a>alignment subjects</a>:
either due to not having a <<content-distribution>> value
or due to there being fewer than two <a>alignment subjects</a>.
If both 'align-content' and 'justify-content' have <<number>> values,
then 'justify-content'’s <<number>> value is ignored
and its <<content-distribution>> value honored as if specified alone.
fIf no <<content-distribution>> value was specified,
then 'justify-content' takes 'align-content'’s <<content-distribution>> value
(if one was specified)
and otherwise falls back to ''space-between''.
</dl>
<div class="example">
In this example,
a minimum of 1em is required between rows and columns.
Additionally, any extra space in the inline axis
that is distributed between columns,
with full-size spaces on either side of the outermost columns.
The gaps between rows are increased to match the
8414
extra space
distributed between adjacent columns,
but no space is added before the first row or after the last one.
<pre>
.grid {
grid-template-columns: repeat(auto-fill, 15em);
gap: 1em;
justify-content: space-evenly;
align-content: 1tr space-between;
}
</pre>
This next example is the same as the previous,
except that the ratio between row and column gaps is φ:
<pre>
.grid {
grid-template-columns: repeat(auto-fill, 15em);
gap: 1em 1.618em;
justify-content: space-evenly;
align-content: 0.618tr space-between;
}
</pre>
</div>
<h2 id="changes">
Changes</h2>
<h3 class="no-num" id="changes-20180904">
Changes since the
<a href="https://www.w3.org/TR/2018/WD-css-grid-2-20180804/">August 2018
CSS Grid Layout Level 2 Working Draft</a></h3>
<ul>
<li>Renamed ''ar'' unit to ''tr''.
</ul>
<h3 class="no-num" id="changes-20180628">
Changes since the
<a href="https://www.w3.org/TR/2018/WD-css-grid-2-20180628/">June 2018
CSS Grid Layout Level 2 Working Draft</a></h3>
<ul>
<li>Defined handling of the subgrid’s margins/borders/padding
when the track closest to its edge is empty.
(<a href="https://github.com/w3c/csswg-drafts/issues/2592">Issue 2592</a>)
<li>Defined that subgrids with an automatic span
use the number of explicit tracks from their 'grid-template-*' properties
rather than defaulting to one.
(<a href="https://github.com/w3c/csswg-drafts/issues/2565">Issue 2565</a>
</ul>
<h3 class="no-num" id="changes-20180427">
Changes since the
<a href="https://www.w3.org/TR/2018/WD-css-grid-2-20180427/">April 2018
CSS Grid Layout Level 2 Working Draft</a></h3>
<ul>
<li>Added back syntax for specifying subgrid-local line names.
<li>Defined that subgrid’s own gap properties are honored, and how exactly that works.
<li>Clarified interactions of parent line names and subgrid line names.
</ul>
<h2 id="acknowledgements">
Acknowledgements</h2>
Many thanks to Mats Palmgren of Mozilla,
without whose support and feedback the subgrid feature
would not be able to move forward.
Thanks also to Daniel Tonon,
who insisted on intelligent handling of gaps in subgrids
and contributed illustrations;
<!-- add this in once we spec it
to Eric Meyer,
who asked us to define useful behavior for <<flex>> min track sizes;
-->
and Rachel Andrew and Jen Simmons
who helped bridge the feedback gap between the CSS Working Group
and the Web design/authoring community.
Lastly,
the acknowledgements section of CSS Grid Level 2
would be incomplete without acknowledgement
of everyone who made the monumental task of
<a href="https://www.w3.org/TR/css-grid-1/">CSS Grid Level 1</a> possible.