Skip to content

Commit

Permalink
[css-grid-3] Expand the grid-independent section for track definitions
Browse files Browse the repository at this point in the history
  • Loading branch information
tabatkins committed Sep 5, 2024
1 parent 376440d commit 5353ee6
Showing 1 changed file with 51 additions and 7 deletions.
58 changes: 51 additions & 7 deletions css-grid-3/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -426,14 +426,58 @@ Masonry Track Specification</h3>
<span class="option masonry">Grid-independent Option:</span> Declaring Masonry Track Templates: the 'masonry-template-*' properties</h3>

Tracks in the [=grid axis=] of a [=masonry container=]
are established with the
<dfn property>masonry-template-tracks</dfn>
and <dfn property>masonry-template-areas</dfn> properties,
whose syntax and interpretation are analogous to the
'grid-template-columns' and 'grid-template-areas' properties.
are established with 'masonry-template-tracks',
'masonry-template-areas',
and 'masonry-auto-tracks'.

<pre class=propdef>
Name: masonry-template-tracks
Value: <<'grid-template-columns'>>
Initial: repeat(auto-areas, auto)
Applies to: [=masonry containers=]
Inherited: no
Percentages: refer to correspodning dimension of the content area
Computed value: by computed value type per item in the [=computed track list=]
Animation type: if list lengths match, by [=computed value=] type; otherwise, discrete
</pre>

'masonry-template-tracks' has the same syntax and interpretation as 'grid-template-columns',
but a different initial value.

(Instead of defaulting to no tracks, as in Grid Layout,
it defaults to matching 'masonry-template-areas', if possible,
or otherwise filling the [=masonry container=]
with as many ''grid-template-columns/auto'' tracks as possible.)

<pre class=propdef>
Name: masonry-template-areas
Value: none | <<string>>
Initial: none
Applies to: [=masonry containers=]
Inherited: no
Percentages: n/a
Computed Value: the keyword ''masonry-template-values/none'' or a string
Canonical Order: per grammar
Animation type: discrete
</pre>

'masonry-template-areas' has the same syntax and interpretation as 'grid-template-areas',
except it only takes a single string defining one "row" of area names.

<pre class=propdef>
Name: masonry-auto-tracks
Value: <<'grid-auto-columns'>>
Initial: auto
Applies to: grid containers
Inherited: no
Percentages: refer to correspodning dimension of the content area
Computed value: a [=computed track list=]
Canonical order: per grammar
Animation type: if the list lengths match, by computed value type per item; discrete otherwise
</pre>

'masonry-auto-tracks' has the same syntax and interpretation as 'grid-auto-columns'.

ISSUE: Should there be a <css>masonry-auto-tracks</css> property,
analogous to 'grid-auto-columns'?
</section>

<h3 id="subgrids">
Expand Down

0 comments on commit 5353ee6

Please sign in to comment.