@@ -159,7 +159,7 @@ Masonry Layout Model</h2>
159
159
lays out items into pre-defined tracks similar to [=grid layout=] in one axis
160
160
(called the <dfn local-lt="grid-axis">grid axis</dfn> ),
161
161
but flows them freely similar to [=flex layout=] in the other
162
- (called the <dfn local-lt="masonry -axis">masonry axis</dfn> ).
162
+ (called the <dfn local-lt="stacking -axis">stacking axis</dfn> ).
163
163
Similar to [=grid layout=] and unlike [=flex layout=] ,
164
164
[=masonry layout=] ’s auto-placement
165
165
distributes items across the tracks to keep the lengths of those tracks
@@ -178,9 +178,9 @@ Masonry Layout Model</h2>
178
178
179
179
A <dfn>masonry container</dfn> is a box whose contents participate in [=masonry layout=] .
180
180
A [=masonry container=] is a <dfn export>column masonry container</dfn>
181
- if its [=masonry axis=] is the [=block axis=] ,
181
+ if its [=stacking axis=] is the [=block axis=] ,
182
182
or a <dfn export>row masonry container</dfn>
183
- if its [=masonry axis=] is the [=inline axis=] .
183
+ if its [=stacking axis=] is the [=inline axis=] .
184
184
185
185
<table class=data>
186
186
<caption> Establishing Masonry Containers</caption>
@@ -237,7 +237,7 @@ Masonry Layout Model</h2>
237
237
<span class="option grid">Grid-integrated Option:</span> Establishing Masonry Layout</h3>
238
238
239
239
<h4 id="grid-template-masonry">
240
- Indicating the Masonry Axis : the ''grid-template-columns/masonry'' keyword for 'grid-template-columns'/'grid-template-rows'</h3>
240
+ Indicating the stacking axis : the ''grid-template-columns/masonry'' keyword for 'grid-template-columns'/'grid-template-rows'</h3>
241
241
242
242
<pre class='propdef partial'>
243
243
Name : grid-template-columns, grid-template-rows
@@ -252,7 +252,7 @@ Indicating the Masonry Axis: the ''grid-template-columns/masonry'' keyword for '
252
252
253
253
[=Masonry layout=] can be applied to [=grid containers=]
254
254
by specifying the value ''grid-template-columns/masonry'' for one of its axes,
255
- defining it as the [=masonry axis=] .
255
+ defining it as the [=stacking axis=] .
256
256
Such [=grid containers=] are called [=masonry containers=] .
257
257
258
258
If ''grid-template-columns/masonry'' is specified
@@ -334,28 +334,28 @@ Masonry Track Direction: the 'masonry-direction' property</h4>
334
334
The 'masonry-direction' property
335
335
specifies how items are placed
336
336
in the [=masonry container=] ,
337
- by setting its [=masonry axis=] and direction.
337
+ by setting its [=stacking axis=] and direction.
338
338
339
339
<dl dfn-type=value dfn-for=masonry-direction>
340
340
: <dfn>column</dfn>
341
- :: The [=masonry container's=] [=masonry axis=] is its [=block axis=] ,
341
+ :: The [=masonry container's=] [=stacking axis=] is its [=block axis=] ,
342
342
and masonry layout starts from its [=block-start=] edge.
343
343
344
344
: <dfn>column-reverse</dfn>
345
- :: The [=masonry container's=] [=masonry axis=] is its [=block axis=] ,
345
+ :: The [=masonry container's=] [=stacking axis=] is its [=block axis=] ,
346
346
and masonry layout starts from its [=block-end=] edge.
347
347
348
348
: <dfn>row</dfn>
349
- :: The [=masonry container's=] [=masonry axis=] is its [=inline axis=] ,
349
+ :: The [=masonry container's=] [=stacking axis=] is its [=inline axis=] ,
350
350
and masonry layout starts from its [=inline-start=] edge.
351
351
352
352
: <dfn>row-reverse</dfn>
353
- :: The [=masonry container's=] [=masonry axis=] is its [=inline axis=] ,
353
+ :: The [=masonry container's=] [=stacking axis=] is its [=inline axis=] ,
354
354
and masonry layout starts from its [=inline-end=] edge.
355
355
</dl>
356
356
357
357
The [=masonry container's=] [=grid axis=]
358
- is perpendicular to its [=masonry axis=] .
358
+ is perpendicular to its [=stacking axis=] .
359
359
360
360
361
361
<h4 id=masonry-fill>
@@ -516,7 +516,7 @@ Subgrids</h3>
516
516
If the parent's corresponding axis is a [=grid axis=] ,
517
517
the subgridded axis is taken from the parent container
518
518
[[css-grid-2#subgrids|as specified for grid containers]] ;
519
- if the parent's corresponding axis is a [=masonry axis=] ...
519
+ if the parent's corresponding axis is a [=stacking axis=] ...
520
520
521
521
<section class="option grid">
522
522
<span class="option grid"> Grid-integrated Syntax:</span>
@@ -594,7 +594,7 @@ Subgrids</h3>
594
594
to the intrinsic size of the 2nd row in the parent grid.
595
595
This is possible since the subgrid specified a definite position
596
596
so we know which tracks it will occupy.
597
- Note also that trying to subgrid the parent's [=masonry axis=]
597
+ Note also that trying to subgrid the parent's [=stacking axis=]
598
598
results in the subgrid getting [=masonry layout=] in its [=inline axis=] .
599
599
</div>
600
600
@@ -909,7 +909,7 @@ Containing Block</h2>
909
909
910
910
The [=containing block=] for a [=grid item=] participating in [=masonry layout=]
911
911
is formed by its [=grid area=] in the [=grid axis=]
912
- and the [=grid container=] 's [=content box=] in the [=masonry axis=] .
912
+ and the [=grid container=] 's [=content box=] in the [=stacking axis=] .
913
913
914
914
<h4 id="rtl-example">
915
915
Placement and Writing Modes</h4>
@@ -918,7 +918,7 @@ Placement and Writing Modes</h4>
918
918
masonry layout and placement is sensitive to the [=writing mode=] .
919
919
For example, for ''direction: rtl'' ,
920
920
items are placed right-to-left rather than left-to-right,
921
- whether the inline axis is a [=grid axis=] or a [=masonry axis=] .
921
+ whether the inline axis is a [=grid axis=] or a [=stacking axis=] .
922
922
923
923
<div class="example">
924
924
Here's a simple <a href="examples/rtl-grid-axis.html">example</a> using ''direction: rtl'' in the [=grid axis=] :
@@ -956,7 +956,7 @@ Placement and Writing Modes</h4>
956
956
957
957
<div class="example">
958
958
Here's a simple <a href="examples/rtl-masonry-axis.html">example</a>
959
- using ''direction: rtl'' in the [=masonry axis=] :
959
+ using ''direction: rtl'' in the [=stacking axis=] :
960
960
961
961
```css
962
962
<style>
@@ -995,8 +995,8 @@ Placement and Writing Modes</h4>
995
995
Sizing Grid Containers</h2>
996
996
997
997
[[css-grid-2#intrinsic-sizes|Sizing Grid Containers]] works the same as for regular [=grid containers=]
998
- but with the following addendum for the [=masonry axis=] :
999
- The <a>max-content size</a> (<a>min-content size</a> ) of a [=grid container=] in the [=masonry axis=]
998
+ but with the following addendum for the [=stacking axis=] :
999
+ The <a>max-content size</a> (<a>min-content size</a> ) of a [=grid container=] in the [=stacking axis=]
1000
1000
is the largest distance between the [=grid container's=] [=content-box=] [=start=] edge
1001
1001
and the maximum [=margin-box=] end of all the items,
1002
1002
when sized under a <a>max-content constraint</a> (<a>min-content constraint</a> ).
@@ -1039,15 +1039,15 @@ Sizing Grid Containers</h2>
1039
1039
Alignment and Spacing</h2>
1040
1040
1041
1041
[[css-grid-2#gutters|Gutters]] are supported in both axes.
1042
- In the [=masonry axis=] ,
1042
+ In the [=stacking axis=] ,
1043
1043
the gap is applied between the margin boxes of each pair of adjacent items.
1044
1044
Margins do not collapse in either axis.
1045
1045
1046
1046
In the [=grid axis=] ,
1047
1047
[[css-grid-2#alignment|alignment]]
1048
1048
works the same as in a regular [=grid container=] .
1049
1049
1050
- In the [=masonry axis=] ,
1050
+ In the [=stacking axis=] ,
1051
1051
[[css-align-3#content-distribution|content-distribution]] is applied
1052
1052
to the content as a whole, similarly to how it behaves in block containers.
1053
1053
More specifically, the <a>alignment subject</a> is the <dfn>masonry box</dfn> ,
@@ -1063,7 +1063,7 @@ Alignment and Spacing</h2>
1063
1063
</figure>
1064
1064
1065
1065
Note: There is only ever one <a>alignment subject</a>
1066
- for these properties in the [=masonry axis=] ,
1066
+ for these properties in the [=stacking axis=] ,
1067
1067
so the unique 'align-content' / 'justify-content' values boil down to
1068
1068
''align-content/start'' ,
1069
1069
''align-content/center'' ,
@@ -1073,21 +1073,21 @@ Alignment and Spacing</h2>
1073
1073
is identical to ''align-content/start'' ,
1074
1074
and the [=distributed alignment=] values behave as their [=fallback alignments=] .)
1075
1075
If the [=grid items=] overflow
1076
- the [=grid container=] 's [=content box=] in the [=masonry axis=] ,
1076
+ the [=grid container=] 's [=content box=] in the [=stacking axis=] ,
1077
1077
then the [=masonry box=] will be larger than the [=grid container=] 's [=content box=] .
1078
1078
1079
- ISSUE: Should alignment in the masonry axis do something more sophisticated?
1079
+ ISSUE: Should alignment in the stacking axis do something more sophisticated?
1080
1080
What should that be?
1081
1081
1082
1082
<h3 id="masonry-axis-baseline-alignment">
1083
- Baseline Alignment in the Masonry Axis </h3>
1083
+ Baseline Alignment in the stacking axis </h3>
1084
1084
1085
1085
Item [=baseline alignment=] inside the [=grid axis=] tracks
1086
1086
works as usual for a regular [=grid container=] ,
1087
1087
and the [=grid container=] 's baseline is determined
1088
1088
the same as for a regular [=grid container=] in that axis.
1089
1089
1090
- [=Baseline alignment=] is not supported in the [=masonry axis=] .
1090
+ [=Baseline alignment=] is not supported in the [=stacking axis=] .
1091
1091
The first baseline set of the [=grid container=] in this axis
1092
1092
is generated from the [=alignment baseline=] of
1093
1093
the first [=grid item=] in the first occupied track,
@@ -1101,9 +1101,9 @@ Baseline Alignment in the Masonry Axis</h3>
1101
1101
Fragmentation</h2>
1102
1102
1103
1103
<h3 id="masonry-axis-pagination">
1104
- Fragmentation in the Masonry Axis </h3>
1104
+ Fragmentation in the stacking axis </h3>
1105
1105
1106
- Each [=grid axis=] track is fragmented independently in the [=masonry axis=] .
1106
+ Each [=grid axis=] track is fragmented independently in the [=stacking axis=] .
1107
1107
If a [=grid item=] is fragmented,
1108
1108
or has a [=forced break=] before/after it,
1109
1109
then the [=running position=] for the tracks that it spans in the [=grid axis=]
@@ -1155,12 +1155,12 @@ Absolute Positioning</h2>
1155
1155
1156
1156
[[css-grid-1#abspos-items|Grid-aligned absolute-positioned descendants]] are supported
1157
1157
in [=masonry containers=] just as for regular [=grid containers=] ;
1158
- however, in the [=masonry axis=] there exist only two lines (in addition to the ''grid-area/auto'' lines) for placement:
1158
+ however, in the [=stacking axis=] there exist only two lines (in addition to the ''grid-area/auto'' lines) for placement:
1159
1159
1160
1160
* line 1 (line -2) corresponds to the start edge of the [=masonry box=]
1161
1161
* line 2 (line -1) corresponds to the end edge of the [=masonry box=]
1162
1162
1163
- ISSUE: It might be useful to define a static position in the [=masonry axis=] .
1163
+ ISSUE: It might be useful to define a static position in the [=stacking axis=] .
1164
1164
Maybe it could defined as the max (or min?) current [=running position=]
1165
1165
of the [=grid-axis=] tracks at that point? Or the end of the item before it?
1166
1166
@@ -1169,7 +1169,7 @@ Performance Notes</h2>
1169
1169
1170
1170
In general, masonry layout should have significantly better performance
1171
1171
than the equivalent regular (2-axis) grid layout,
1172
- particularly when the [=masonry axis=] is the [=block axis=]
1172
+ particularly when the [=stacking axis=] is the [=block axis=]
1173
1173
since the intrinsic sizing of grid rows is typically quite expensive.
1174
1174
Any intrinsic track sizing in the [=grid axis=] should be cheaper too,
1175
1175
because, typically, only a subset of items contribute to the intrinsic sizing in a masonry layout,
@@ -1184,7 +1184,7 @@ Performance Notes</h2>
1184
1184
by opting out from the stretching on most items though,
1185
1185
e.g. specifying ''justify/align-items:start''
1186
1186
and then opting in for just a few items with ''justify/align-self:stretch''
1187
- to let those items fill the [=masonry axis=] .
1187
+ to let those items fill the [=stacking axis=] .
1188
1188
(This performance analysis is from a Gecko perspective,
1189
1189
but I suspect there's some truth to it for other layout engines as well.)
1190
1190
0 commit comments