[css-multicol] Initial draft of block direction overflow

Author: rachelandrew

css-multicol-2/Overview.bs

@@ -777,6 +777,38 @@ The number and width of columns</h2>
 	the column gap and the width of the multicol container (assuming horizontal text)
 	must also be specified.
 
+<h3 id='ch'>The Block Size of Columns: the 'column-height' property</h3>
+
+	<pre class=propdef>
+	Name: column-height
+	Value: auto | <<length [0,&infin;]>>
+	Initial: auto
+	Applies to: <a>block containers</a> except <a>table wrapper boxes</a>
+	Inherited: no
+	Percentages: N/A
+	Computed value: the keyword ''auto'' or an absolute length
+	Animation type: by computed value type
+	</pre>
+
+	This property describes the height of columns in multicol containers.
+
+	<dl dfn-type=value dfn-for=column-height>
+		<dt><dfn>auto</dfn></dt>
+		<dd>
+			means that the column height will be determined by the amount of content
+			and other properties.
+
+		<dt><dfn><<length [0,&infin;]>></dfn>
+		<dd>
+			describes the desired column height.
+			Negative values are not allowed.
+		</dd>
+	</dl>
+
+	If you set 'column-height' and 'height' on a multicol container,
+	you may end up with some additional space.
+	The properties defined in the [[CSS-ALIGN]] specification detail how to deal with it.
+
 <h3 id='cc'>The Number of Columns: the 'column-count' property</h3>
 
 	<pre class=propdef>
@@ -835,14 +867,87 @@ The number and width of columns</h2>
 		<pre highlight="css">body { column-count: 3 }</pre>
 	</div>
 
-<h3 id="columns">The 'column-width' and 'column-count' Shorthand: The 'columns' Property</h3>
+<h3 id='cwr'>The overflow direction in continuous media: the 'column-wrap' property</h3>
+
+	<pre class=propdef>
+	Name: column-wrap
+	Value: nowrap | wrap
+	Initial: nowrap
+	Applies to: multicol containers
+	Inherited: no
+	Percentages: n/a
+	Computed value: specified keyword
+	Canonical order: per grammar
+	Animation type: discrete
+	</pre>
+
+	The column-wrap property controls the behavior of overflow columns in continuous media.
+	The property only takes effect if 'column-height' is not 'auto',
+	and there is more content than will fit in a single row of columns at the specified 'column-height'.
+
+	<dl dfn-type=value dfn-for=column-wrap>
+		<dt><dfn>nowrap</dfn>
+		<dd>
+			Overflow columns are created in the inline direction.
+
+		<dt><dfn>wrap</dfn>
+		<dd>
+			Overflow columns create a new multicol row in the block direction.
+		</dd>
+	</dl>
+
+	<div class="example">
+	Example:
+
+	<pre highlight="css">
+	body {
+		column-count: 3;
+		column-wrap: nowrap;
+		column-height: 10em;
+	}
+	</pre>
+
+	This CSS creates a set of three columns.
+	If there is more content than would fit in the 10em height of these columns,
+	new columns are created in the inline direction
+	even if there is room in the multicol container.
+	
+	</div>
+
+	<div class="example">
+	Example:
+
+	<pre highlight="css">
+	body {
+  		column-count: 3;
+  		column-wrap: wrap;
+		column-height: 10em;
+	}
+	</pre>
+
+	This CSS creates a set of three columns.
+	If there is more content than would fit in the 10em height of these columns,
+	rather than overflowing in the inline direction, 
+	a new row of columns is created in the block direction, again at a max column-height of 10em.
+	New rows repeat until all content is displayed.
+	</div>
+
+	Issue(11754): The addition of this property is as yet unresolved.
+	
+	Issue(11754): What happens if you set a height on the multicol container, 'column-wrap: wrap' but no 'column-height'?
+	Options are 1: The 'column-wrap' property is ignored. 2: 'column-height: auto' resolves to the available space
+	in the multicol container and new rows of that size are created for the overflow,
+	thus honoring the 'wrap' value.
+
+<h3 id="columns">The 'column-width', 'column-count', 'column-height', and 'column-wrap' Shorthand: The 'columns' Property</h3>
 
 	<pre class="propdef shorthand">
 	Name: columns
-	Value: <<'column-width'>> || <<'column-count'>>
+	Value: <<'column-width'>> || <<'column-count'>> || <<'column-height'>> || <<'column-wrap'>>
 	</pre>
 
-	This is a shorthand property for setting 'column-width' and 'column-count'.
+	This is a shorthand property for setting 'column-width', 'column-count',
+	'column-height', and 'column-wrap'.
 	Omitted values are set to their initial values.
 
 	<div class="example">
@@ -855,6 +960,8 @@ The number and width of columns</h2>
 		columns: 2 auto;    /* column-width: auto; column-count: 2 */
 		columns: auto;      /* column-width: auto; column-count: auto */
 		columns: auto auto; /* column-width: auto; column-count: auto */
+		columns: 12em 14em; /* column-width: 12em; column-height: 14em; */
+		columns: 12em 14em wrap;  /* column-width: 12em; column-height: 14em; column-wrap: wrap; */
 		</pre>
 	</div>
 
@@ -1141,6 +1248,15 @@ without caring about the <em>contents</em>.
 	multicol-gap-animation-003.html
 	</wpt>
 
+<h3 id='cg'>Gutters Between Rows: the 'row-gap' property</h3>
+
+	The 'row-gap' property is defined in [[!CSS3-ALIGN]].
+
+	In a [=multi-column formatting context=]
+	the used value of ''row-gap/normal'' for the 'row-gap' property is ''1em''.
+	If there is a rule between rows,
+	it will appear in the middle of the gap.
+
 <h3 id='crc'>The Color of Column Rules: the
 'column-rule-color' property</h3>
 
@@ -2149,7 +2265,9 @@ This appendix is <em>informative</em>.
 <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>
 
 <ul>
-	<li>Adds the the ''::column'' pseudo-element. <a href="https://github.com/w3c/csswg-drafts/issues/10715#issuecomment-2379924982">Resolved 27 Sep 2024</a>.</li>
+	<li>Adds a draft of proposed ''column-wrap'' property.</li>
+	<li>Adds the ''column-height'' property. <a href="https://github.com/w3c/csswg-drafts/issues/2923#issuecomment-2625930018">Resolved 30 Jan 2025</a>.
+	<li>Adds the ''::column'' pseudo-element. <a href="https://github.com/w3c/csswg-drafts/issues/10715#issuecomment-2379924982">Resolved 27 Sep 2024</a>.</li>
 	<li>Adds a draft of proposed <css>&lt;integer></css> and <css>auto</css> values for ''column-span''.</li>
 </ul>