@@ -363,6 +363,50 @@ Establishing Grid Lanes Layout</h3>
363363 ISSUE(12820): Write up how grid/masonry formatting contexts work more formally?
364364 </div>
365365
366+ <h3 id="grid-lanes-orientation">
367+ Orienting Grid Lanes Layout</h3>
368+
369+ The orientation of a [=grid lanes container=] ,
370+ i.e. whether its [=grid axis=] is
371+ the [=inline axis=] (establishing columns)
372+ or the [=block axis=] (establishing rows)
373+ is determined by the <span class="issue"> TBD</span> property.
374+
375+ The [=initial value=] of this property is <dfn value for=grid-auto-flow>normal</dfn> ,
376+ which determines the orientation from the 'grid-template-*' properties:
377+
378+ * If 'grid-template-columns' is ''grid-template-columns/none''
379+ and 'grid-template-rows' is not ''grid-template-rows/none'' ,
380+ the [=grid container=] ’s [=block axis=] is the [=grid axis=] (establishing rows).
381+ * Otherwise (thus by default),
382+ the [=grid container=] ’s [=inline axis=] is the [=grid axis=] (establishing columns).
383+
384+ <div class="example">
385+ The following code will create a 2-column (“waterfall style”) [=grid lanes container=]
386+ that grows downward:
387+
388+ <pre class=css>
389+ .container {
390+ display: grid-lanes;
391+ grid-template-<strong> columns</strong> : 100px 200px;
392+ }
393+ </pre>
394+
395+ while the following code will create a 2-row (“brick wall style”) [=grid lanes container=]
396+ that grows horizontally:
397+
398+ <pre class=css>
399+ .container {
400+ display: grid-lanes;
401+ grid-template-<strong> rows</strong> : 100px 200px;
402+ }
403+ </pre>
404+ </div>
405+
406+ ISSUE(12803): Figure out whether we are re-using 'grid-auto-flow' here
407+ (and what it's values mean)
408+ or defining a new property like <css> grid-lanes-direction</css> .
409+
366410<h2 id="grid-lanes-track-templates" oldids="masonry-track-templates">
367411Grid Lanes Track Specification</h2>
368412
@@ -676,7 +720,7 @@ Optimized Track Sizing</h4>
676720 <a href="https://github.com/w3c/csswg-drafts/issues">report it to the CSSWG</a> .
677721
678722<h2 id="grid-lanes-track-placement" oldids="masonry-track-placement">
679- Grid Lanes Track Placement</h2>
723+ Grid Lanes Item Placement</h2>
680724
681725 In the [=grid axis=] ,
682726 items can be <em> explicitly placed</em> into tracks and span them using the familiar [=grid-placement properties=] ’ syntax.
@@ -1070,8 +1114,10 @@ Alignment and Spacing</h2>
10701114 the [=grid container=] 's [=content box=] in the [=stacking axis=] ,
10711115 then the [=stacking range=] will be larger than the [=grid container=] 's [=content box=] .
10721116
1073- ISSUE: Should alignment in the stacking axis do something more sophisticated?
1074- What should that be?
1117+
1118+
1119+ ISSUE(10275): Is this a reasonable definition for how the [=self-alignment properties=] should work in the [=stacking axis=] ?
1120+
10751121
10761122<h3 id="grid-lanes-baseline-alignment" oldids="masonry-baseline-alignment">
10771123Baseline Alignment</h3>
0 commit comments