[css-grid] Per WG resolution, switch to using square brackets rather than parens for <line-names>.

Author: tabatkins

css-grid/Overview.bs

@@ -469,8 +469,8 @@ Grid Lines</h3>
 			/* equivalent layout to the prior example, but using named lines */
 			#grid {
 				display: grid;
-				grid-template-columns: 150px (item1-start) 1fr (item1-end);
-				grid-template-rows: (item1-start) 50px 1fr 50px (item1-end);
+				grid-template-columns: 150px [item1-start] 1fr [item1-end];
+				grid-template-rows: [item1-start] 50px 1fr 50px [item1-end];
 			}
 
 			#item1 {
@@ -970,13 +970,10 @@ Track Sizing: the 'grid-template-rows' and 'grid-template-columns' properties</h
 		<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-names></dfn>     = '[' <<custom-ident>>* ']'
 		<dfn>&lt;line-name-list></dfn> = [ <<line-names>> | repeat([ <<positive-integer>> | auto ], <<line-names>>+) ]+
 	</pre>
 
-	Issue: It's been proposed to use brackets [] instead of parens () for <<line-names>>.
-	<a href="https://lists.w3.org/Archives/Public/www-style/2015May/0103.html">(see discussion)</a>
-
 	Where:
 
 	<dl dfn-for="grid-template-columns, grid-template-rows" dfn-type=value>
@@ -1107,8 +1104,8 @@ Named Grid Lines: the <css>(<<custom-ident>>*)</css> syntax</h4>
 			&lt;style>
 			#grid {
 				display: grid;
-				grid-template-columns: (first nav) 150px (main) 1fr (last);
-				grid-template-rows: (first header) 50px (main) 1fr (footer) 50px (last);
+				grid-template-columns: [first nav] 150px [main] 1fr [last];
+				grid-template-rows: [first header] 50px [main] 1fr [footer] 50px [last];
 			}
 			&lt;/style>
 		</pre>
@@ -1168,17 +1165,17 @@ Repeating Rows and Columns: the ''repeat()'' notation</h4>
 			&lt;style>
 			#grid {
 				display: grid;
-				grid-template-columns: 10px (col-start) 250px (col-end)
-				                       10px (col-start) 250px (col-end)
-				                       10px (col-start) 250px (col-end)
-				                       10px (col-start) 250px (col-end) 10px;
+				grid-template-columns: 10px [col-start] 250px [col-end]
+				                       10px [col-start] 250px [col-end]
+				                       10px [col-start] 250px [col-end]
+				                       10px [col-start] 250px [col-end] 10px;
 				grid-template-rows: 1fr;
 			}
 
 			/* Equivalent definition. */
 			#grid {
 				display: grid;
-				grid-template-columns: repeat(4, 10px (col-start) 250px (col-end)) 10px;
+				grid-template-columns: repeat(4, 10px [col-start] 250px [col-end]) 10px;
 				grid-template-rows: 1fr;
 			}
 			&lt;/style>
@@ -1187,7 +1184,7 @@ Repeating Rows and Columns: the ''repeat()'' notation</h4>
 
 	If the ''repeat()'' function ends up placing two <<line-names>> adjacent to each other,
 	the name lists are merged.
-	For example, ''repeat(2, (a) 1fr (b))'' is equivalent to ''(a) 1fr (b a) 1fr (b)''.
+	For example, ''repeat(2, [a] 1fr [b])'' is equivalent to ''[a] 1fr [b a] 1fr [b]''.
 
 	Note: It is expected that a future level of this specification will define a value to be inserted between the repetitions,
 	similar to the argument of the <code>Array#join</code> method in JavaScript.
@@ -1370,7 +1367,7 @@ Subgrids: the ''grid-template-rows/subgrid'' keyword</h4>
 			<div class="example">
 				For example, if the subgrid above were specified with 5 names:
 
-				<pre>#subgrid { grid-template-columns: subgrid (first) (second) (third) (fourth) (fifth); }</pre>
+				<pre>#subgrid { grid-template-columns: subgrid [first] [second] [third] [fourth] [fifth]; }</pre>
 
 				Items within the subgrid could be positioned using the first four line names;
 				the last name would be ignored (as if it didn't exist),
@@ -1424,9 +1421,9 @@ Resolved Values</h4>
 			#grid {
 				width: 500px;
 				grid-template-columns:
-				  (a)     auto
-				  (b)     minmax(min-content, 1fr)
-				  (b c d) repeat(2, (e) 40px)
+				  [a]     auto
+				  [b]     minmax(min-content, 1fr)
+				  [b c d] repeat(2, [e] 40px)
 				          repeat(5, auto);
 			}
 			&lt;/style>
@@ -1437,7 +1434,7 @@ Resolved Values</h4>
 			&lt;script>
 			  var gridElement = document.getElementById("grid");
 			  getComputedStyle(gridElement).gridTemplateColumns;
-			  // (a) 50px (b) 320px (b c d) repeat(2, (e) 40px) repeat(4, 0px) 50px
+			  // [a] 50px [b] 320px [b c d] repeat(2, [e] 40px) repeat(4, 0px) 50px
 			&lt;/script>
 		</pre>
 	</div>
@@ -1669,15 +1666,15 @@ Explicit Grid Shorthand: the 'grid-template' property</h3>
 			<div class='example'>
 				<pre>
 					grid-template: auto 1fr auto /
-					  (header-top) "a   a   a"     (header-bottom)
-					    (main-top) "b   b   b" 1fr (main-bottom);
+					  [header-top] "a   a   a"     [header-bottom]
+					    [main-top] "b   b   b" 1fr [main-bottom];
 				</pre>
 
 					is equivalent to
 
 				<pre>
 					grid-template-columns: auto 1fr auto;
-					grid-template-rows: (header-top) auto (header-bottom main-top) 1fr (main-bottom);
+					grid-template-rows: [header-top] auto [header-bottom main-top] 1fr [main-bottom];
 					grid-template-areas: "a a a"
 					                     "b b b";
 				</pre>
@@ -1866,7 +1863,7 @@ Sizing Auto-generated Rows and Columns: the 'grid-auto-rows' and 'grid-auto-colu
 				display: grid;
 				/* Define three columns, all content-sized,
 				   and name the corresponding lines. */
-				grid-template-columns: (labels) auto (controls) auto (oversized) auto;
+				grid-template-columns: [labels] auto [controls] auto [oversized] auto;
 				grid-auto-flow: row;
 			}
 			form > label {
@@ -3627,6 +3624,7 @@ Changes</h2>
 
 	* A <a>subgrid</a> now only ignores width/height/alignment constraints in the subgridded dimension(s).
 	* Made ''repeat(auto)'' pay attention to max size when it's definite, too.
+	* Per WG resolution, switched to using square brackets for <<line-names>>, rather than parentheses.
 
 
 <h3 id="changes-20140513">