[css-grid] First pass at repeat(auto-fill|auto-fit) syntax.

Author: fantasai

css-grid/Overview.bs

@@ -934,7 +934,7 @@ Track Sizing: the 'grid-template-rows' and 'grid-template-columns' properties</h
 
 	<pre class='propdef'>
 	Name: grid-template-columns, grid-template-rows
-	Value: none | <<track-list>> | subgrid <<line-name-list>>?
+	Value: none | <<track-list>> | <<auto-track-list>> | subgrid <<line-name-list>>?
 	Initial: none
 	Applies to: <a>grid containers</a>
 	Inherited: no
@@ -969,11 +969,16 @@ Track Sizing: the 'grid-template-rows' and 'grid-template-columns' properties</h
 	The syntax of a <a>track list</a> is:
 
 	<pre>
-		<dfn>&lt;track-list></dfn>     = [ <<line-names>>? [ <<track-size>> | <<repeat()>> ] ]+ <<line-names>>?
-		<dfn>&lt;track-size></dfn>     = minmax( <<track-breadth>> , <<track-breadth>> ) | <<track-breadth>>
-		<dfn>&lt;track-breadth></dfn>  = <<length>> | <<percentage>> | <<flex>> | min-content | max-content | auto
-		<dfn>&lt;line-names></dfn>     = '[' <<custom-ident>>* ']'
-		<dfn>&lt;line-name-list></dfn> = [ <<line-names>> | repeat([ <<positive-integer>> | auto ], <<line-names>>+) ]+
+		<dfn>&lt;track-list></dfn>       = [ <<line-names>>? [ <<track-size>> | <<track-repeat>> ] ]+ <<line-names>>?
+		<dfn>&lt;auto-track-list></dfn>  = [ <<line-names>>? [ <<fixed-size>> | <<fixed-repeat>> ] ]+ <<auto-repeat>>
+		                     [ <<line-names>>? [ <<fixed-size>> | <<fixed-repeat>> ] ]+ <<line-names>>?
+		<dfn>&lt;line-name-list></dfn>   = [ <<line-names>> | <<name-repeat>> ]+
+
+		<dfn>&lt;track-size></dfn>       = <<track-breadth>> | minmax( <<track-breadth>> , <<track-breadth>> )
+		<dfn>&lt;fixed-size></dfn>       = <<fixed-breadth>> | minmax( <<fixed-breadth>> , <<track-breadth>> )
+		<dfn>&lt;track-breadth></dfn>    = <<length>> | <<percentage>> | <<flex>> | min-content | max-content | auto
+		<dfn>&lt;fixed-breadth></dfn>    = <<length>> | <<percentage>>
+		<dfn>&lt;line-names></dfn>       = '[' <<custom-ident>>* ']'
 	</pre>
 
 	Where:
@@ -1027,6 +1032,9 @@ Track Sizing: the 'grid-template-rows' and 'grid-template-columns' properties</h
 			As a maximum, identical to ''max-content''.
 			As a minimum, represents the largest minimum size (as specified by 'min-width'/'min-height')
 			of the <a>grid items</a> occupying the <a>grid track</a>.
+
+			Note: ''grid-template-rows/auto'' track sizes (and only ''grid-template-rows/auto'' track sizes)
+			can be streched by the 'align-content' and 'justify-content' properties.
 	</dl>
 
 	<div class='example'>
@@ -1131,20 +1139,31 @@ Named Grid Lines: the <css>[<<custom-ident>>*]</css> syntax</h4>
 <h4 id='repeat-notation'>
 Repeating Rows and Columns: the ''repeat()'' notation</h4>
 
-	The ''repeat()'' notation represents a repeated fragment of the <a>track list</a>,
+	The <dfn>repeat()</dfn> notation represents a repeated fragment of the <a>track list</a>,
 	allowing a large number of columns or rows that exhibit a recurring pattern
 	to be written in a more compact form.
-	The syntax of the ''repeat()'' notation is:
+	The syntax of the ''repeat()'' notation
+	has several forms:
 
 	<pre class='prod'>
-		<dfn>repeat()</dfn> = repeat( <<positive-integer>>, [ <<line-names>>? <<track-size>> ]+ <<line-names>>? ) |
+		<dfn><<track-repeat>></dfn> = repeat( <<positive-integer>>,     [ <<line-names>>? <<track-size>> ]+ <<line-names>>? )
+		<dfn><<auto-repeat>></dfn>  = repeat( [ auto-fill | auto-fit ], [ <<line-names>>? <<fixed-size>> ]+ <<line-names>>? )
+		<dfn><<fixed-repeat>></dfn> = repeat( <<positive-integer>>,     [ <<line-names>>? <<fixed-size>> ]+ <<line-names>>? )
+		<dfn><<name-repeat>></dfn>  = repeat( [ <<positive-integer>> | auto-fill ], <<line-names>>+)
 	</pre>
 
 	The first argument specifies the number of repetitions.
 	The second argument is a <a>track list</a>,
 	which is repeated that number of times.
-	The ''repeat()'' notation cannot be nested;
-	doing so makes the declaration invalid.
+
+	* The <<track-repeat>> variant can represent the repeatition of any <<track-size>>,
+		but is limited to fixed repetitions.
+	* The <<auto-repeat>> variant can repeat automatically to fill a space,
+		but requires <a>definite</a> minimum track sizes so that the number of repetitions can be calculated.
+		It can only appear once in the <a>track list</a>,
+		but the same <a>track list</a> can also contain <<fixed-repeat>>s.
+	* The <<name-repeat>> variant can be used with the ''grid-template-rows/subgrid'' keyword:
+		it only repeats names.
 
 	<div class='example'>
 		This example shows two equivalent ways of writing the same grid definition.
@@ -1179,30 +1198,21 @@ Repeating Rows and Columns: the ''repeat()'' notation</h4>
 <h5 id="repeat-auto">
 Repeat-to-fill</h5>
 
-	Issue: We're trying to solve <a href="https://lists.w3.org/Archives/Public/www-style/2014Oct/0108.html">this problem</a>,
-	which should be easy, but isn't at the moment.
-
-	<pre class="prod">
-		<dfn><<auto-repeat>></dfn> = repeat( auto, [ <<line-names>>? [ <<length>> | <<percentage>> ] ]+ <<line-names>>? )
-	</pre>
-
-	If the number of repetitions is <dfn value for=repeat()>auto</dfn>
-	and the <a>grid container</a> has a <a>definite</a> size or max size in the relevant axis,
-	then the number of repetitions is the largest possible integer
+	When <dfn for="repeat()">''auto-fill''</dfn> is given as the repetition number,
+	if the <a>grid container</a> has a <a>definite</a> size or max size in the relevant axis,
+	then the number of repetitions is the largest possible positive integer
 	that does not cause the <a>grid</a> to overflow its <a>grid container</a>
-	(treating all tracks as their <a>max track sizing function</a> if that is <a>definite</a> or as zero otherwise).
-	Otherwise, the <a>track list</a> repeats only once.
-	A <<track-list>> with more than one ''repeat()/auto'' ''repeat()'' function,
-	or with any content-sized tracks in addition to the ''repeat()/auto'' ''repeat()'' function,
-	is invalid.
-
-	Issue: François suggests a way to generate "just enough" repeated columns for the number of items in the grid.
-	<a href="https://lists.w3.org/Archives/Public/www-style/2015May/0113.html">(see discussion)</a>
-	One proposal is to have two keywords instead of just one ''repeat()/auto'' keyword:
-	<css>auto-fill</css> to fill the grid with repetitions,
-	and <css>auto-fit</css> to fill the grid and then drop empty repetitions.
+	(treating each track as its <a>max track sizing function</a> if that is <a>definite</a>
+	or as its minimum track sizing function otherwise).
+	Otherwise, the specified <a>track list</a> repeats only once.
 
+	The <dfn for="repeat()">''auto-fit''</dfn> keyword behaves the same as ''auto-fill'',
+	except that after <a href="#auto-placement-algo">grid item placement</a>
+	any empty repetitions are dropped.
 
+	Issue: Now that we have gutters, most use cases for auto-repetition will need only one track size.
+	It would also be much simpler for implementations if only one track size were allowed.
+	Should we simplify the argument to the <<auto-repeat>> functions to only allow one <<fixed-size>>?
 
 <!--
 ████████ ████████        ██     ██ ██    ██ ████ ████████
@@ -3648,7 +3658,9 @@ Changes</h2>
 
 	* Renamed <css>row-gap</css>/<css>column-gap</css> to 'grid-row-gap'/'grid-column-gap'
 		to avoid having multicol and grid share 'column-gap'.
-		This also preserves <css>'grid-'</css> as a prefix across these properties and their shorthand.
+		This also preserves <css>grid-</css> as a prefix across these properties and their shorthand.
+	* Split ''auto'' into ''auto-fill' and ''auto-fit'' keywords for ''repeat()'' notation,
+		adjusted grammar to prevent 
 
 	The following significant changes were made since the
 	<a href=http://www.w3.org/TR/2015/WD-css-grid-1-20150317/>17 March 2015 Working Draft</a>.