[css-grid-2] Add proposal for aspect-ratio--controlled gutters. w3c#1116

Author: fantasai

css-grid-2/Overview.bs

@@ -16,6 +16,12 @@ Introduction {#intro}
 =====================
 
 This level is currently maintained as a diff spec over the level 1 module [[!CSS-GRID-1]].
+It adds the following features:
+
+  * Subgrids
+  * Aspect-ratio-controlled gutters
+
+Issue: There's currently also an issue about Masonry layout, but it's unlikely to make it for L2.
 
 <h2 id="grid-model">
 Grid Containers</h2>
@@ -275,6 +281,88 @@ Subgrids</h2>
 			their lines automatically receive the line names specified on the parent <a>grid</a>.
 	</ul>
 
+<h2 id=alignment>
+Aspect-ratio&ndash;controlled Gutters</h2>
+
+	Issue: There's a desire for having row and column gaps maintain a particular aspect ratio.
+	This is one proposal for doing so; other ideas are welcome.<br>
+	Possible extension: allow aspect ratio multipliers on 'row-gap' and 'column-gap' as well (not really useful except if you're using percents).<br>
+	Possible variation: use an `ar` unit instead of bare <<number>>s.
+
+	<pre class="propdef">
+	Name: align-content, justify-content
+	New values: [ <<number>> && <<content-distribution>>? ]
+	</pre>
+
+	<dl dfn-for="align-content,justify-content" dfn-type=value>
+		<dt><dfn><<number>></dfn>
+		<dd>
+			Represents a multiplier against the analogous quantity
+			in the other dimension.
+			If that quantity cannot be determined
+			(e.g. is itself specified as a <<number>>, or otherwise can't be referenced),
+			then it is assumed to be zero.
+
+			Note: This value can expand gutters
+			even when there is no free space left,
+			causing oveflow.
+
+			Specifically, an 'align-content' value of ''1'' represents
+			the amount of space (which may be zero) allocated between two adjacent
+			<a>alignment subjects</a> (<a>grid tracks</a> / <a>flex lines</a> / <a>column boxes</a>)
+			by the 'justify-content' property.
+			Unless a different <<content-distribution>> value is specified,
+			space is distributed according to the same <<content-distribution>> rules
+			as for 'justify-content'.
+			The behavior of <<number>> values for 'justify-content' is analogous.
+
+			Note: The space allocated by ''align-content: 1'' will be zero
+			if 'justify-content' does not allocate space
+			between adjacent <a>alignment subjects</a>:
+			either due to not having a <<content-distribution>> value
+			or due to there being fewer than two <a>alignment subjects</a>.
+
+			If both 'align-content' and 'justify-content' have <<number>> values,
+			then 'justify-content'’s <<number>> value is ignored
+			and its <<content-distribution>> value honored as if specified alone.
+			If no <<content-distribution>> value was specified,
+			then 'justify-content' takes 'align-content'’s <<content-distribution>> value
+			(if one was specified)
+			and otherwise falls back to ''space-between''.
+	</dl>
+
+	<div class="example">
+		In this example,
+		a minimum of 1em is required between rows and columns.
+		Additionally, any extra space in the inline axis
+		that is distributed between columns,
+		with full-size spaces on either side of the outermost columns.
+		The gaps between rows are increased to match the extra space
+		distributed between adjacent columns,
+		but no space is added before the first row or after the last one.
+
+		<pre>
+			.grid {
+				grid-template-columns: repeat(auto-fill, 15em);
+				gap: 1em;
+				justify-content: space-evenly;
+				align-content: 1.0 space-between;
+			}
+		</pre>
+
+		This next example is the same as the previous,
+		except that the ratio between row and column gaps is &phi;:
+
+		<pre>
+			.grid {
+				grid-template-columns: repeat(auto-fill, 15em);
+				gap: 1em 1.618em;
+				justify-content: space-evenly;
+				align-content: 0.618 space-between;
+			}
+		</pre>
+	</div>
+
 <!--
 ██     ██    ███     ██████   ███████  ██    ██ ████████  ██    ██
 ███   ███   ██ ██   ██    ██ ██     ██ ███   ██ ██     ██  ██  ██