Skip to content

Commit

Permalink
[css-grid-3][editorial] Rename masonry axis to stacking axis
Browse files Browse the repository at this point in the history
Because a masonry layout is composed of both a grid axis and a stacking axis.
  • Loading branch information
fantasai committed Sep 10, 2024
1 parent ae201f5 commit 5a6154b
Showing 1 changed file with 31 additions and 31 deletions.
62 changes: 31 additions & 31 deletions css-grid-3/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@ Masonry Layout Model</h2>
lays out items into pre-defined tracks similar to [=grid layout=] in one axis
(called the <dfn local-lt="grid-axis">grid axis</dfn>),
but flows them freely similar to [=flex layout=] in the other
(called the <dfn local-lt="masonry-axis">masonry axis</dfn>).
(called the <dfn local-lt="stacking-axis">stacking axis</dfn>).
Similar to [=grid layout=] and unlike [=flex layout=],
[=masonry layout=]’s auto-placement
distributes items across the tracks to keep the lengths of those tracks
Expand All @@ -178,9 +178,9 @@ Masonry Layout Model</h2>

A <dfn>masonry container</dfn> is a box whose contents participate in [=masonry layout=].
A [=masonry container=] is a <dfn export>column masonry container</dfn>
if its [=masonry axis=] is the [=block axis=],
if its [=stacking axis=] is the [=block axis=],
or a <dfn export>row masonry container</dfn>
if its [=masonry axis=] is the [=inline axis=].
if its [=stacking axis=] is the [=inline axis=].

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

<h4 id="grid-template-masonry">
Indicating the Masonry Axis: the ''grid-template-columns/masonry'' keyword for 'grid-template-columns'/'grid-template-rows'</h3>
Indicating the stacking axis: the ''grid-template-columns/masonry'' keyword for 'grid-template-columns'/'grid-template-rows'</h3>

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

[=Masonry layout=] can be applied to [=grid containers=]
by specifying the value ''grid-template-columns/masonry'' for one of its axes,
defining it as the [=masonry axis=].
defining it as the [=stacking axis=].
Such [=grid containers=] are called [=masonry containers=].

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

<dl dfn-type=value dfn-for=masonry-direction>
: <dfn>column</dfn>
:: The [=masonry container's=] [=masonry axis=] is its [=block axis=],
:: The [=masonry container's=] [=stacking axis=] is its [=block axis=],
and masonry layout starts from its [=block-start=] edge.

: <dfn>column-reverse</dfn>
:: The [=masonry container's=] [=masonry axis=] is its [=block axis=],
:: The [=masonry container's=] [=stacking axis=] is its [=block axis=],
and masonry layout starts from its [=block-end=] edge.

: <dfn>row</dfn>
:: The [=masonry container's=] [=masonry axis=] is its [=inline axis=],
:: The [=masonry container's=] [=stacking axis=] is its [=inline axis=],
and masonry layout starts from its [=inline-start=] edge.

: <dfn>row-reverse</dfn>
:: The [=masonry container's=] [=masonry axis=] is its [=inline axis=],
:: The [=masonry container's=] [=stacking axis=] is its [=inline axis=],
and masonry layout starts from its [=inline-end=] edge.
</dl>

The [=masonry container's=] [=grid axis=]
is perpendicular to its [=masonry axis=].
is perpendicular to its [=stacking axis=].


<h4 id=masonry-fill>
Expand Down Expand Up @@ -516,7 +516,7 @@ Subgrids</h3>
If the parent's corresponding axis is a [=grid axis=],
the subgridded axis is taken from the parent container
[[css-grid-2#subgrids|as specified for grid containers]];
if the parent's corresponding axis is a [=masonry axis=]...
if the parent's corresponding axis is a [=stacking axis=]...

<section class="option grid">
<span class="option grid">Grid-integrated Syntax:</span>
Expand Down Expand Up @@ -594,7 +594,7 @@ Subgrids</h3>
to the intrinsic size of the 2nd row in the parent grid.
This is possible since the subgrid specified a definite position
so we know which tracks it will occupy.
Note also that trying to subgrid the parent's [=masonry axis=]
Note also that trying to subgrid the parent's [=stacking axis=]
results in the subgrid getting [=masonry layout=] in its [=inline axis=].
</div>

Expand Down Expand Up @@ -909,7 +909,7 @@ Containing Block</h2>

The [=containing block=] for a [=grid item=] participating in [=masonry layout=]
is formed by its [=grid area=] in the [=grid axis=]
and the [=grid container=]'s [=content box=] in the [=masonry axis=].
and the [=grid container=]'s [=content box=] in the [=stacking axis=].

<h4 id="rtl-example">
Placement and Writing Modes</h4>
Expand All @@ -918,7 +918,7 @@ Placement and Writing Modes</h4>
masonry layout and placement is sensitive to the [=writing mode=].
For example, for ''direction: rtl'',
items are placed right-to-left rather than left-to-right,
whether the inline axis is a [=grid axis=] or a [=masonry axis=].
whether the inline axis is a [=grid axis=] or a [=stacking axis=].

<div class="example">
Here's a simple <a href="examples/rtl-grid-axis.html">example</a> using ''direction: rtl'' in the [=grid axis=]:
Expand Down Expand Up @@ -956,7 +956,7 @@ Placement and Writing Modes</h4>

<div class="example">
Here's a simple <a href="examples/rtl-masonry-axis.html">example</a>
using ''direction: rtl'' in the [=masonry axis=]:
using ''direction: rtl'' in the [=stacking axis=]:

```css
<style>
Expand Down Expand Up @@ -995,8 +995,8 @@ Placement and Writing Modes</h4>
Sizing Grid Containers</h2>

[[css-grid-2#intrinsic-sizes|Sizing Grid Containers]] works the same as for regular [=grid containers=]
but with the following addendum for the [=masonry axis=]:
The <a>max-content size</a> (<a>min-content size</a>) of a [=grid container=] in the [=masonry axis=]
but with the following addendum for the [=stacking axis=]:
The <a>max-content size</a> (<a>min-content size</a>) of a [=grid container=] in the [=stacking axis=]
is the largest distance between the [=grid container's=] [=content-box=] [=start=] edge
and the maximum [=margin-box=] end of all the items,
when sized under a <a>max-content constraint</a> (<a>min-content constraint</a>).
Expand Down Expand Up @@ -1039,15 +1039,15 @@ Sizing Grid Containers</h2>
Alignment and Spacing</h2>

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

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

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

Note: There is only ever one <a>alignment subject</a>
for these properties in the [=masonry axis=],
for these properties in the [=stacking axis=],
so the unique 'align-content' / 'justify-content' values boil down to
''align-content/start'',
''align-content/center'',
Expand All @@ -1073,21 +1073,21 @@ Alignment and Spacing</h2>
is identical to ''align-content/start'',
and the [=distributed alignment=] values behave as their [=fallback alignments=].)
If the [=grid items=] overflow
the [=grid container=]'s [=content box=] in the [=masonry axis=],
the [=grid container=]'s [=content box=] in the [=stacking axis=],
then the [=masonry box=] will be larger than the [=grid container=]'s [=content box=].

ISSUE: Should alignment in the masonry axis do something more sophisticated?
ISSUE: Should alignment in the stacking axis do something more sophisticated?
What should that be?

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

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

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

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

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

[[css-grid-1#abspos-items|Grid-aligned absolute-positioned descendants]] are supported
in [=masonry containers=] just as for regular [=grid containers=];
however, in the [=masonry axis=] there exist only two lines (in addition to the ''grid-area/auto'' lines) for placement:
however, in the [=stacking axis=] there exist only two lines (in addition to the ''grid-area/auto'' lines) for placement:

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

ISSUE: It might be useful to define a static position in the [=masonry axis=].
ISSUE: It might be useful to define a static position in the [=stacking axis=].
Maybe it could defined as the max (or min?) current [=running position=]
of the [=grid-axis=] tracks at that point? Or the end of the item before it?

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

In general, masonry layout should have significantly better performance
than the equivalent regular (2-axis) grid layout,
particularly when the [=masonry axis=] is the [=block axis=]
particularly when the [=stacking axis=] is the [=block axis=]
since the intrinsic sizing of grid rows is typically quite expensive.
Any intrinsic track sizing in the [=grid axis=] should be cheaper too,
because, typically, only a subset of items contribute to the intrinsic sizing in a masonry layout,
Expand All @@ -1184,7 +1184,7 @@ Performance Notes</h2>
by opting out from the stretching on most items though,
e.g. specifying ''justify/align-items:start''
and then opting in for just a few items with ''justify/align-self:stretch''
to let those items fill the [=masonry axis=].
to let those items fill the [=stacking axis=].
(This performance analysis is from a Gecko perspective,
but I suspect there's some truth to it for other layout engines as well.)

Expand Down

0 comments on commit 5a6154b

Please sign in to comment.