Skip to content

Commit 5a6154b

Browse files
committed
[css-grid-3][editorial] Rename masonry axis to stacking axis
Because a masonry layout is composed of both a grid axis and a stacking axis.
1 parent ae201f5 commit 5a6154b

File tree

1 file changed

+31
-31
lines changed

1 file changed

+31
-31
lines changed

css-grid-3/Overview.bs

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ Masonry Layout Model</h2>
159159
lays out items into pre-defined tracks similar to [=grid layout=] in one axis
160160
(called the <dfn local-lt="grid-axis">grid axis</dfn>),
161161
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>).
163163
Similar to [=grid layout=] and unlike [=flex layout=],
164164
[=masonry layout=]’s auto-placement
165165
distributes items across the tracks to keep the lengths of those tracks
@@ -178,9 +178,9 @@ Masonry Layout Model</h2>
178178

179179
A <dfn>masonry container</dfn> is a box whose contents participate in [=masonry layout=].
180180
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=],
182182
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=].
184184

185185
<table class=data>
186186
<caption>Establishing Masonry Containers</caption>
@@ -237,7 +237,7 @@ Masonry Layout Model</h2>
237237
<span class="option grid">Grid-integrated Option:</span> Establishing Masonry Layout</h3>
238238

239239
<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>
241241

242242
<pre class='propdef partial'>
243243
Name: grid-template-columns, grid-template-rows
@@ -252,7 +252,7 @@ Indicating the Masonry Axis: the ''grid-template-columns/masonry'' keyword for '
252252

253253
[=Masonry layout=] can be applied to [=grid containers=]
254254
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=].
256256
Such [=grid containers=] are called [=masonry containers=].
257257

258258
If ''grid-template-columns/masonry'' is specified
@@ -334,28 +334,28 @@ Masonry Track Direction: the 'masonry-direction' property</h4>
334334
The 'masonry-direction' property
335335
specifies how items are placed
336336
in the [=masonry container=],
337-
by setting its [=masonry axis=] and direction.
337+
by setting its [=stacking axis=] and direction.
338338

339339
<dl dfn-type=value dfn-for=masonry-direction>
340340
: <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=],
342342
and masonry layout starts from its [=block-start=] edge.
343343

344344
: <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=],
346346
and masonry layout starts from its [=block-end=] edge.
347347

348348
: <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=],
350350
and masonry layout starts from its [=inline-start=] edge.
351351

352352
: <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=],
354354
and masonry layout starts from its [=inline-end=] edge.
355355
</dl>
356356

357357
The [=masonry container's=] [=grid axis=]
358-
is perpendicular to its [=masonry axis=].
358+
is perpendicular to its [=stacking axis=].
359359

360360

361361
<h4 id=masonry-fill>
@@ -516,7 +516,7 @@ Subgrids</h3>
516516
If the parent's corresponding axis is a [=grid axis=],
517517
the subgridded axis is taken from the parent container
518518
[[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=]...
520520

521521
<section class="option grid">
522522
<span class="option grid">Grid-integrated Syntax:</span>
@@ -594,7 +594,7 @@ Subgrids</h3>
594594
to the intrinsic size of the 2nd row in the parent grid.
595595
This is possible since the subgrid specified a definite position
596596
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=]
598598
results in the subgrid getting [=masonry layout=] in its [=inline axis=].
599599
</div>
600600

@@ -909,7 +909,7 @@ Containing Block</h2>
909909

910910
The [=containing block=] for a [=grid item=] participating in [=masonry layout=]
911911
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=].
913913

914914
<h4 id="rtl-example">
915915
Placement and Writing Modes</h4>
@@ -918,7 +918,7 @@ Placement and Writing Modes</h4>
918918
masonry layout and placement is sensitive to the [=writing mode=].
919919
For example, for ''direction: rtl'',
920920
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=].
922922

923923
<div class="example">
924924
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>
956956

957957
<div class="example">
958958
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=]:
960960

961961
```css
962962
<style>
@@ -995,8 +995,8 @@ Placement and Writing Modes</h4>
995995
Sizing Grid Containers</h2>
996996

997997
[[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=]
10001000
is the largest distance between the [=grid container's=] [=content-box=] [=start=] edge
10011001
and the maximum [=margin-box=] end of all the items,
10021002
when sized under a <a>max-content constraint</a> (<a>min-content constraint</a>).
@@ -1039,15 +1039,15 @@ Sizing Grid Containers</h2>
10391039
Alignment and Spacing</h2>
10401040

10411041
[[css-grid-2#gutters|Gutters]] are supported in both axes.
1042-
In the [=masonry axis=],
1042+
In the [=stacking axis=],
10431043
the gap is applied between the margin boxes of each pair of adjacent items.
10441044
Margins do not collapse in either axis.
10451045

10461046
In the [=grid axis=],
10471047
[[css-grid-2#alignment|alignment]]
10481048
works the same as in a regular [=grid container=].
10491049

1050-
In the [=masonry axis=],
1050+
In the [=stacking axis=],
10511051
[[css-align-3#content-distribution|content-distribution]] is applied
10521052
to the content as a whole, similarly to how it behaves in block containers.
10531053
More specifically, the <a>alignment subject</a> is the <dfn>masonry box</dfn>,
@@ -1063,7 +1063,7 @@ Alignment and Spacing</h2>
10631063
</figure>
10641064

10651065
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=],
10671067
so the unique 'align-content' / 'justify-content' values boil down to
10681068
''align-content/start'',
10691069
''align-content/center'',
@@ -1073,21 +1073,21 @@ Alignment and Spacing</h2>
10731073
is identical to ''align-content/start'',
10741074
and the [=distributed alignment=] values behave as their [=fallback alignments=].)
10751075
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=],
10771077
then the [=masonry box=] will be larger than the [=grid container=]'s [=content box=].
10781078

1079-
ISSUE: Should alignment in the masonry axis do something more sophisticated?
1079+
ISSUE: Should alignment in the stacking axis do something more sophisticated?
10801080
What should that be?
10811081

10821082
<h3 id="masonry-axis-baseline-alignment">
1083-
Baseline Alignment in the Masonry Axis</h3>
1083+
Baseline Alignment in the stacking axis</h3>
10841084

10851085
Item [=baseline alignment=] inside the [=grid axis=] tracks
10861086
works as usual for a regular [=grid container=],
10871087
and the [=grid container=]'s baseline is determined
10881088
the same as for a regular [=grid container=] in that axis.
10891089

1090-
[=Baseline alignment=] is not supported in the [=masonry axis=].
1090+
[=Baseline alignment=] is not supported in the [=stacking axis=].
10911091
The first baseline set of the [=grid container=] in this axis
10921092
is generated from the [=alignment baseline=] of
10931093
the first [=grid item=] in the first occupied track,
@@ -1101,9 +1101,9 @@ Baseline Alignment in the Masonry Axis</h3>
11011101
Fragmentation</h2>
11021102

11031103
<h3 id="masonry-axis-pagination">
1104-
Fragmentation in the Masonry Axis</h3>
1104+
Fragmentation in the stacking axis</h3>
11051105

1106-
Each [=grid axis=] track is fragmented independently in the [=masonry axis=].
1106+
Each [=grid axis=] track is fragmented independently in the [=stacking axis=].
11071107
If a [=grid item=] is fragmented,
11081108
or has a [=forced break=] before/after it,
11091109
then the [=running position=] for the tracks that it spans in the [=grid axis=]
@@ -1155,12 +1155,12 @@ Absolute Positioning</h2>
11551155

11561156
[[css-grid-1#abspos-items|Grid-aligned absolute-positioned descendants]] are supported
11571157
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:
11591159

11601160
* line 1 (line -2) corresponds to the start edge of the [=masonry box=]
11611161
* line 2 (line -1) corresponds to the end edge of the [=masonry box=]
11621162

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=].
11641164
Maybe it could defined as the max (or min?) current [=running position=]
11651165
of the [=grid-axis=] tracks at that point? Or the end of the item before it?
11661166

@@ -1169,7 +1169,7 @@ Performance Notes</h2>
11691169

11701170
In general, masonry layout should have significantly better performance
11711171
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=]
11731173
since the intrinsic sizing of grid rows is typically quite expensive.
11741174
Any intrinsic track sizing in the [=grid axis=] should be cheaper too,
11751175
because, typically, only a subset of items contribute to the intrinsic sizing in a masonry layout,
@@ -1184,7 +1184,7 @@ Performance Notes</h2>
11841184
by opting out from the stretching on most items though,
11851185
e.g. specifying ''justify/align-items:start''
11861186
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=].
11881188
(This performance analysis is from a Gecko perspective,
11891189
but I suspect there's some truth to it for other layout engines as well.)
11901190

0 commit comments

Comments
 (0)