You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
There is a proposal to have ''subgrid'' be instead a keyword
50
+
for 'grid-template-rows' and 'grid-template-columns',
51
+
which would allow subgridding to apply to a single axis,
52
+
not only both axes simultaneously.
53
+
The same constraints apply as specified in <a href="#subgrids"></a>,
54
+
but only to the subgridded dimension.
55
+
56
+
As with the ''display: subgrid'' proposal,
57
+
placement of all grid items, including subgrids and their sub-items,
58
+
occurs before sizing,
59
+
and track sizing in each axis is handled in independent steps
60
+
as per the Grid Sizing Algorithm.
61
+
In the case of a single-axis subgrid,
62
+
the track sizing in a subgridded dimension treats each item in a given track in that axis
63
+
as part of the parent grid;
64
+
and in the other axis, the subgrid item is treated as a nested grid.
65
+
66
+
For example, suppose we have a parent grid container A
67
+
which contains an item B that has subgridded columns
68
+
and contains a grandchild C that has subgridded rows
69
+
and grandchild C' that is simply a nested grid.
70
+
When A sizes its columns it treats B's items slotted into to A's corresponding columns,
71
+
but when A sizes its rows it treates B as a single item
72
+
(a grid container with its own rows and some items including items C and C').
73
+
Similarly when B sizes its rows,
74
+
it treats C's items as slotted into B's rows,
75
+
but when B sizes its columns,
76
+
it treats C as a single item,
77
+
just as it does with C'.
78
+
There is no relationship between C's rows and A's rows,
79
+
because the rows in B are nested, not subgridded.
80
+
81
+
At a high level, the grid algorithm is:
82
+
83
+
<ol>
84
+
<li>Size the columns
85
+
<li>Size the rows
86
+
<li>Adjust the columns (if needed based on final row sizes)
87
+
</ol>
88
+
89
+
The grid sizing algorithm in this example would thus look like this:
90
+
<ol>
91
+
<li>Resolve sizes of A’s grid columns,
92
+
using the sizes of A’s grid items,
93
+
treating B as empty but treating its children (including C and C') as items in grid A.
94
+
95
+
The grid algorithm simply recurses into C'.
96
+
For C, it's more complicated:
97
+
98
+
<ol>
99
+
<li>Size C's columns
100
+
<li>Size C's rows by sizing B's rows
101
+
<li>Adjust C's columns
102
+
<li>Return C's final column sizes.
103
+
</ol>
104
+
105
+
A correct size for B's rows requires C's final column sizes,
106
+
because the row size depends on the column size,
107
+
and thus B's rows could very well depend on C's final column sizes.
108
+
To break this cyclic dependency, we need to split the algorithm to depend on the initial approximation of C's final column sizes, and do the adjustment pass later.
109
+
So for C, we need to recurse into column sizing only, and pass that initial size up to A for its initial column sizing.
110
+
111
+
When we size B's rows later on, we will size C's rows (which are subgridded),
112
+
and finish up C's sizing by finalizing its columns.
113
+
If this resulted in a change, we have the opportunity
114
+
to trigger an adjustment pass for A's columns during its adjustment pass.
115
+
116
+
<li>Next, resolve sizes of A's rows,
117
+
using the sizes of A’s grid items,
118
+
treating B as a single item.
119
+
120
+
Since B, as a subgrid, has its sizing is split out into the multiple passes,
121
+
the grid algorithm issues only a row-sizing recursion into B:
122
+
Size B’s rows, treating C’ as a single item, requesting its final size,
123
+
and treating C as an empty item and hoisting its children as items in grid B.
124
+
125
+
B returns its final row size, which factors into A’s row sizing pass.
126
+
127
+
<li>Last, finalize A’s column sizes.
128
+
If C’s final size changes as a result of the row-sizing pass through B,
129
+
this should trigger a resizing of B’s columns,
130
+
which should trigger a resizing pass on A’s column.
0 commit comments