You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Reordered Grid Items: the <aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-flexbox-1/#ordertitle=order>order</a> property</span><aclass=section-linkhref=#order-property>§</a></h3>
786
+
Reordered Grid Items: the <aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-flexbox-1/#propdef-ordertitle=order>order</a> property</span><aclass=section-linkhref=#order-property>§</a></h3>
787
787
788
788
<p>
789
-
The <aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-flexbox-1/#ordertitle=order>order</a> property also applies to <ahref=#grid-item>grid items</a>.
789
+
The <aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-flexbox-1/#propdef-ordertitle=order>order</a> property also applies to <ahref=#grid-item>grid items</a>.
790
790
It affects their <ahref=#grid-auto-flow-property>auto-placement</a> and <ahref=#z-order>painting order</a>.
<pclass=note> Note: A future level of this module is expected to add a value that flows auto-positioned items together into a single “default” cell.
1444
1444
1445
1445
<pclass=issue>
1446
-
IE compat apparently requires the <adata-link-for=grid-auto-flowdata-link-type=valuehref=#valuedef-none>none</a> value,
1447
-
but it's not a very good value.
1448
-
Can we perhaps just have that be an IE-specific value set in the UA stylesheet?
1449
-
Change our value to <spanclass=cssdata-link-type=maybe>stack</span>
1450
-
and let <aclass=propertydata-link-type=propdeschref=#propdef-grid-auto-positiontitle=grid-auto-position>grid-auto-position</a> accept <code>rows | columns</code> instead to mean "use the auto-placement algorithm".
1446
+
Win8 compat might require the <adata-link-for=grid-auto-flowdata-link-type=valuehref=#valuedef-none>none</a> value to stay the initial value,
1447
+
but it's not a very good value,
1448
+
because by default the entire contents of a grid container will end up stacked on top of each other.
1449
+
See <ahref=http://lists.w3.org/Archives/Public/www-archive/2013Aug/0024.html>proposals to address this</a>
1450
+
while addressing use cases and back-compat.
1451
1451
1452
1452
<p>
1453
-
Auto-placement takes <ahref=#grid-item>grid items</a> in <aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-flexbox-1/#ordertitle=order>order</a>-modified document order.
1453
+
Auto-placement takes <ahref=#grid-item>grid items</a> in <aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-flexbox-1/#propdef-ordertitle=order>order</a>-modified document order.
Put in "common uses" section, like <aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-flexbox-1/#flextitle=flex>flex</a> has, to describe what you would use <aclass=propertydata-link-type=propdeschref=#propdef-grid-areatitle=grid-area>grid-area</a> for, etc.
1639
+
Put in "common uses" section, like <aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-flexbox-1/#propdef-flextitle=flex>flex</a> has, to describe what you would use <aclass=propertydata-link-type=propdeschref=#propdef-grid-areatitle=grid-area>grid-area</a> for, etc.
Line-based Placement: the <aclass=propertydata-link-type=propdeschref=#propdef-grid-row-starttitle=grid-row-start>grid-row-start</a>, <aclass=propertydata-link-type=propdeschref=#propdef-grid-column-starttitle=grid-column-start>grid-column-start</a>, <aclass=propertydata-link-type=propdeschref=#propdef-grid-row-endtitle=grid-row-end>grid-row-end</a>, and <aclass=propertydata-link-type=propdeschref=#propdef-grid-column-endtitle=grid-column-end>grid-column-end</a> properties</span><aclass=section-linkhref=#line-placement>§</a></h3>
the <ahref=http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index><aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-position-3/#z-indextitle=z-index>z-index</a></a> property provides control over the drawing order of <ahref=#grid-item>grid items</a>.
1966
1966
<ahref=#grid-item>Grid items</a> paint <ahref=http://www.w3.org/TR/css3-flexbox/#painting>exactly the same as flex items</a><adata-biblio-type=normativedata-link-type=bibliohref=#css3-flexboxtitle=CSS3-FLEXBOX>[CSS3-FLEXBOX]</a>:
1967
-
they use <aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-flexbox-1/#ordertitle=order>order</a>-modified document order,
1967
+
they use <aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-flexbox-1/#propdef-ordertitle=order>order</a>-modified document order,
1968
1968
and <aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-position-3/#z-indextitle=z-index>z-index</a> values other than <adata-link-for=z-indexdata-link-type=value>auto</a> create a stacking context even if <aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-position-3/#positiontitle=position>position</a> is <spanclass=cssdata-link-type=maybe>static</span>.
Otherwise, if the grid container has at least one <ahref=#grid-item>grid item</a> whose area intersects the first row/column,
2024
-
and the first such <ahref=#grid-item>grid item</a> (in <ahref=#order-modified-grid-order><aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-flexbox-1/#ordertitle=order>order</a>-modified grid order</a>) has a baseline
2024
+
and the first such <ahref=#grid-item>grid item</a> (in <ahref=#order-modified-grid-order><aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-flexbox-1/#propdef-ordertitle=order>order</a>-modified grid order</a>) has a baseline
2025
2025
parallel to the relevant axis,
2026
2026
the grid container's baseline is that baseline.
2027
2027
2028
2028
<li>
2029
2029
Otherwise, the grid container's baseline is <ahref=http://www.w3.org/TR/css3-writing-modes/#inline-alignment>synthesized</a>
2030
-
from the first item's (in <ahref=#order-modified-grid-order><aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-flexbox-1/#ordertitle=order>order</a>-modified grid order</a>) content box,
2030
+
from the first item's (in <ahref=#order-modified-grid-order><aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-flexbox-1/#propdef-ordertitle=order>order</a>-modified grid order</a>) content box,
2031
2031
or, failing that, from the grid container's content box.
and its inline axis is parallel to that dimension.
2038
2038
2039
2039
<p>
2040
-
<dfndata-dfn-type=dfndata-export="" id=order-modified-grid-order><aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-flexbox-1/#ordertitle=order>order</a>-modified grid order</dfn> is the order in which
2040
+
<dfndata-dfn-type=dfndata-export="" id=order-modified-grid-order><aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-flexbox-1/#propdef-ordertitle=order>order</a>-modified grid order</dfn> is the order in which
2041
2041
<ahref=#grid-item>grid items</a> are encountered when traversing the grid's <ahref=#grid-cell>grid cells</a>,
2042
2042
in row-major order if calculating the inline-axis baseline,
2043
2043
or in column-major order if calculating the block-axis baseline.
2044
2044
If two items are encountered at the same time,
2045
-
they are taken in <aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-flexbox-1/#ordertitle=order>order</a>-modified document order.
2045
+
they are taken in <aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-flexbox-1/#propdef-ordertitle=order>order</a>-modified document order.
2046
2046
2047
2047
<p>
2048
2048
When calculating the baseline according to the above rules,
0 commit comments