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
Copy file name to clipboardExpand all lines: css-multicol-2/Overview.bs
+23-14Lines changed: 23 additions & 14 deletions
Original file line number
Diff line number
Diff line change
@@ -1,3 +1,4 @@
1
+
1
2
<pre class="metadata">
2
3
Title: CSS Multi-column Layout Module Level 2
3
4
Group: CSSWG
@@ -23,6 +24,14 @@ spec: css21;
23
24
</pre>
24
25
<pre class=link-defaults>
25
26
spec:css-break-4; type:dfn; text:fragment
27
+
spec:css-borders-4; type:value; for:border-style;
28
+
text:hidden
29
+
text:none
30
+
spec:css-gaps-1; type:property;
31
+
text:column-rule
32
+
text:column-rule-color
33
+
text:column-rule-style
34
+
text:column-rule-width
26
35
</pre>
27
36
28
37
<style type="text/css">
@@ -546,8 +555,8 @@ The multi-column model</h2>
546
555
<figcaption>A demonstration of how the spanning element divides the multicol container.</figcaption>
547
556
</figure>
548
557
</div>
549
-
550
-
If the spanning element is larger in the block direction than the space available in the current multicol row,
558
+
559
+
If the spanning element is larger in the block direction than the space available in the current multicol row,
551
560
the row geometry is maintained. The spanner is allowed to cross the row boundary,
552
561
over any gap, and into the next row.
553
562
@@ -666,10 +675,10 @@ The number and size of columns</h2>
666
675
</ul>
667
676
668
677
A fourth property, 'columns', is a shorthand property which sets all of
669
-
'column-width', 'column-height', and 'column-count'.
678
+
'column-width', 'column-height', and 'column-count'.
670
679
671
680
Other factors, such as explicit column breaks, content, column wrapping,
672
-
and size constraints, may influence the actual number and size of columns.
681
+
and size constraints, may influence the actual number and size of columns.
673
682
674
683
675
684
<h3 id='cw'>The Inline Size of Columns: the 'column-width' property</h3>
@@ -802,7 +811,7 @@ The number and size of columns</h2>
802
811
you may end up with some additional space.
803
812
The properties defined in the [[CSS-ALIGN]] specification detail how to deal with it.
804
813
805
-
When 'column-height' is not 'auto' the size in the block direction is not flexible.
814
+
When 'column-height' is not 'column-height/auto' the size in the block direction is not flexible.
806
815
If there is not enough content to fill a row of columns at the set size,
807
816
empty space is left.
808
817
@@ -888,7 +897,7 @@ The number and size of columns</h2>
888
897
<dl dfn-type=value dfn-for=column-wrap>
889
898
<dt><dfn>auto</dfn>
890
899
<dd>
891
-
If 'column-height' is not 'auto' behaves as the value 'wrap' otherwise acts as 'nowrap'.
900
+
If 'column-height' is not 'column-height/auto' behaves as the value 'column-wrap/wrap' otherwise acts as 'column-wrap/nowrap'.
892
901
893
902
<dt><dfn>nowrap</dfn>
894
903
<dd>
@@ -923,8 +932,8 @@ The number and size of columns</h2>
923
932
924
933
<pre highlight="css">
925
934
body {
926
-
column-count: 3;
927
-
column-wrap: wrap;
935
+
column-count: 3;
936
+
column-wrap: wrap;
928
937
column-height: 10em;
929
938
}
930
939
</pre>
@@ -946,7 +955,7 @@ The number and size of columns</h2>
946
955
Issue(11754): What happens if you set a height on the multicol container, 'column-wrap: wrap' but no 'column-height'?
947
956
Options are 1: The 'column-wrap' property is ignored. 2: 'column-height: auto' resolves to the available space
948
957
in the multicol container and new rows of that size are created for the overflow,
949
-
thus honoring the 'wrap' value.
958
+
thus honoring the 'column-wrap/wrap' value.
950
959
951
960
<h3 id="columns">The 'column-width', 'column-count', and 'column-height' Shorthand: The 'columns' Property</h3>
952
961
@@ -1244,7 +1253,7 @@ without caring about the <em>contents</em>.
1244
1253
multicol-gap-animation-003.html
1245
1254
</wpt>
1246
1255
1247
-
<h3 id='cg'>Gutters Between Rows: the 'row-gap' property</h3>
1256
+
<h3 id='rg'>Gutters Between Rows: the 'row-gap' property</h3>
1248
1257
1249
1258
The 'row-gap' property is defined in [[!CSS3-ALIGN]].
1250
1259
@@ -1253,7 +1262,7 @@ without caring about the <em>contents</em>.
1253
1262
If there is a rule between rows,
1254
1263
it will appear in the middle of the gap.
1255
1264
1256
-
<h3 id='crc'>The Color, Width, and Style of Column Rules: the
1265
+
<h3 id='crc' oldids='crs,crw'>The Color, Width, and Style of Column Rules: the
1257
1266
gap decoration properties</h3>
1258
1267
1259
1268
The gap decoration properties of 'column-rule' and 'row-rule',
@@ -2180,13 +2189,13 @@ This appendix is <em>informative</em>.
2180
2189
<h3 id="changes-from-multicol1">Changes from the <a href="https://www.w3.org/TR/2024/CR-css-multicol-1-20240516/">Candidate Recommendation (CR) of CSS-MULTICOL-1 of 16 May 2024</a></h3>
2181
2190
2182
2191
<ul>
2183
-
<li>Defines that the size of the columns in the block direction is maintained when 'column-height' is set, even if there's not enough content to fill a row.
2192
+
<li>Defines that the size of the columns in the block direction is maintained when 'column-height' is set, even if there's not enough content to fill a row.
2184
2193
<a href="https://github.com/w3c/csswg-drafts/issues/11976#issuecomment-3206088562">Resolved 20 August 2025</a></li>
2185
2194
<li>Defines that spanners only span the current row of columns when wrapping.
2186
2195
<a href="https://github.com/w3c/csswg-drafts/issues/11976#issuecomment-3206088562">Resolved 20 August 2025</a></li>
2187
-
<li>Defines what happens when a spanner is larger than the available space in the block direction.
2196
+
<li>Defines what happens when a spanner is larger than the available space in the block direction.
2188
2197
<a href="https://github.com/w3c/csswg-drafts/issues/11976#issuecomment-3206088562">Resolved 20 August 2025</a></li>
2189
-
<li>Updates the ''columns'' shorthand property to include ''column-height''. <a href="https://github.com/w3c/csswg-drafts/issues/12050#issuecomment-3160860557">Resolved 6 Aug 2025</a>.
2198
+
<li>Updates the ''columns'' shorthand property to include ''column-height''. <a href="https://github.com/w3c/csswg-drafts/issues/12050#issuecomment-3160860557">Resolved 6 Aug 2025</a>.
2190
2199
<li>Adds a draft of proposed ''column-wrap'' property.</li>
2191
2200
<li>Adds the ''column-height'' property. <a href="https://github.com/w3c/csswg-drafts/issues/2923#issuecomment-2625930018">Resolved 30 Jan 2025</a>.
2192
2201
<li>Adds the ''::column'' pseudo-element. <a href="https://github.com/w3c/csswg-drafts/issues/10715#issuecomment-2379924982">Resolved 27 Sep 2024</a>.</li>
0 commit comments