Tidy up grid-properties docs (#2355)

files/en-us/web/css/grid-auto-columns/index.html

@@ -72,14 +72,17 @@ <h3 id="Values">Values</h3>
  <dd>Is a keyword representing the largest maximal content contribution of the grid items occupying the grid track.</dd>
  <dt>{{cssxref("min-content")}}</dt>
  <dd>Is a keyword representing the largest minimal content contribution of the grid items occupying the grid track.</dd>
- <dt>{{cssxref("minmax", "minmax(min, max)")}}</dt>
+ <dt>{{cssxref("minmax()", "minmax(min, max)")}}</dt>
  <dd>Is a functional notation that defines a size range greater than or equal to <em>min</em> and less than or equal to <em>max</em>. If <em>max</em> is smaller than <em>min</em>, then <em>max</em> is ignored and the function is treated as <em>min</em>. As a maximum, a <code>&lt;flex&gt;</code> value sets the track’s flex factor. As a minimum, it is treated as zero (or minimal content, if the grid container is sized under a minimal content constraint).</dd>
  <dt>{{cssxref("fit-content()", "fit-content( [ &lt;length&gt; | &lt;percentage&gt; ] )")}}</dt>
  <dd>Represents the formula <code>min(max-content, max(auto, <var>argument</var>))</code>, which is calculated similar to <code>auto</code> (i.e. <code>minmax(auto, max-content)</code>), except that the track size is clamped at <var>argument</var> if it is greater than the <code>auto</code> minimum.</dd>
  <dt><code>auto</code></dt>
  <dd>Is a keyword that is identical to maximal content if it's a maximum. As a minimum it represents the largest minimum size (as specified by {{cssxref("min-width")}}/{{cssxref("min-height")}}) of the grid items occupying the grid track.</dd>
  <dd>
- <p class="note">Note: <code>auto</code> track sizes (and only <code>auto</code> track sizes) can be stretched by the {{cssxref("align-content")}} and {{cssxref("justify-content")}} properties.</p>
+ <div class="notecard note">
+   <h4>Note</h4>
+  <p><code>auto</code> track sizes (and only <code>auto</code> track sizes) can be stretched by the {{cssxref("align-content")}} and {{cssxref("justify-content")}} properties.</p>
+  </div>
  </dd>
 </dl>
 
@@ -149,7 +152,7 @@ <h2 id="See_also">See also</h2>
 
 <ul>
  <li>Related CSS properties: {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}}, {{cssxref("grid")}}</li>
- <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout#Sizing_rows_in_the_implicit_grid">Auto-placement in grid layout - sizing rows in the implicit grid</a></em></li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout#sizing_rows_in_the_implicit_grid">Auto-placement in grid layout - sizing rows in the implicit grid</a></em></li>
  <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-auto-placement-order/">Introducing Grid auto-placement and order</a></em></li>
 </ul>
 

files/en-us/web/css/grid-template-columns/index.html

@@ -6,7 +6,7 @@
   - CSS Grid
   - CSS Property
   - Reference
-  - 'recipe:css-property'
+  - recipe:css-property
 ---
 <p>The <strong><code>grid-template-columns</code></strong> CSS property defines the line names and track sizing functions of the {{glossary("grid column", "grid columns")}}.</p>
 
@@ -63,7 +63,7 @@ <h3 id="Values">Values</h3>
  <dd>Is a keyword representing the largest maximal content contribution of the grid items occupying the grid track.</dd>
  <dt>{{cssxref("min-content")}}</dt>
  <dd>Is a keyword representing the largest minimal content contribution of the grid items occupying the grid track.</dd>
- <dt>{{cssxref("minmax", "minmax(min, max)")}}</dt>
+ <dt>{{cssxref("minmax()", "minmax(min, max)")}}</dt>
  <dd>Is a functional notation that defines a size range greater than or equal to <em>min</em> and less than or equal to <em>max</em>. If <em>max</em> is smaller than <em>min</em>, then <em>max</em> is ignored and the function is treated as <em>min</em>. As a maximum, a <code>&lt;flex&gt;</code> value sets the track’s flex factor. It is invalid as a minimum.</dd>
  <dt id="auto"><code>auto</code></dt>
  <dd>Is a keyword that is identical to maximal content if it's a maximum. As a minimum it represents the largest minimum size (as specified by {{cssxref("min-width")}}/{{cssxref("min-height")}}) of the grid items occupying the grid track.</dd>
@@ -72,7 +72,7 @@ <h3 id="Values">Values</h3>
  </dd>
  <dt id="fit-content()"><code>{{cssxref("fit-content()", "fit-content( [ &lt;length&gt; | &lt;percentage&gt; ] )")}}</code></dt>
  <dd>Represents the formula <code>min(max-content, max(auto, <var>argument</var>))</code>, which is calculated similar to <code>auto</code> (i.e. <code>minmax(auto, max-content)</code>), except that the track size is clamped at <var>argument</var> if it is greater than the <code>auto</code> minimum.</dd>
- <dt>{{cssxref("repeat", "repeat( [ &lt;positive-integer&gt; | auto-fill | auto-fit ] , &lt;track-list&gt; )")}}</dt>
+ <dt>{{cssxref("repeat()", "repeat( [ &lt;positive-integer&gt; | auto-fill | auto-fit ] , &lt;track-list&gt; )")}}</dt>
  <dd>Represents a repeated fragment of the track list, allowing a large number of columns that exhibit a recurring pattern to be written in a more compact form.</dd>
  <dt><code><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout">masonry</a></code>{{Experimental_Inline}}</dt>
  <dd>The masonry value indicates that this axis should be laid out according to the masonry algorithm.</dd>
@@ -81,10 +81,9 @@ <h3 id="Values">Values</h3>
 </dl>
 
 <div class="notecard warning">
+  <h4>Note</h4>
 <p>The <code>masonry</code> value is from Level 3 of the Grid specification and currently only has an experimental implementation behind a flag in Firefox.</p>
-</div>
 
-<div class="notecard warning">
 <p>The <code>subgrid</code> value is from Level 2 of the Grid specification and currently only has implementation in Firefox 71 and onwards.</p>
 </div>
 
@@ -164,7 +163,7 @@ <h2 id="See_also">See also</h2>
 
 <ul>
  <li>Related CSS properties: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template")}}</li>
- <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Grid_Tracks">Basic concepts of grid layout - Grid Tracks</a></em></li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#grid_tracks">Basic concepts of grid layout - Grid Tracks</a></em></li>
  <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-define-a-grid/">Defining a Grid</a></em></li>
  <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid">Subgrid</a></li>
 </ul>

files/en-us/web/css/grid-template-rows/index.html

@@ -6,7 +6,7 @@
   - CSS Grid
   - CSS Property
   - Reference
-  - 'recipe:css-property'
+  - recipe:css-property
 ---
 <p>The <strong><code>grid-template-rows</code></strong> CSS property defines the line names and track sizing functions of the {{glossary("grid rows", "grid rows")}}.</p>
 
@@ -69,7 +69,7 @@ <h3 id="Values">Values</h3>
  <dd>Is a keyword representing the largest maximal content contribution of the grid items occupying the grid track.</dd>
  <dt>{{cssxref("min-content")}}</dt>
  <dd>Is a keyword representing the largest minimal content contribution of the grid items occupying the grid track.</dd>
- <dt>{{cssxref("minmax", "minmax(min, max)")}}</dt>
+ <dt>{{cssxref("minmax()", "minmax(min, max)")}}</dt>
  <dd>Is a functional notation that defines a size range, greater than or equal to <em>min</em>, and less than or equal to <em>max</em>. If <em>max</em> is smaller than <em>min</em>, then <em>max</em> is ignored and the function is treated as <em>min</em>. As a maximum, a <code>&lt;flex&gt;</code> value sets the track’s flex factor. It is invalid as a minimum.</dd>
  <dt><code>auto</code></dt>
  <dd>Is a keyword that is identical to maximal content if it's a maximum. As a minimum it represents the largest minimum size (as specified by {{cssxref("min-width")}}/{{cssxref("min-height")}}) of the grid items occupying the grid track.</dd>
@@ -78,7 +78,7 @@ <h3 id="Values">Values</h3>
  </dd>
  <dt>{{cssxref("fit-content()", "fit-content( [ &lt;length&gt; | &lt;percentage&gt; ] )")}}</dt>
  <dd>Represents the formula <code>min(max-content, max(auto, <var>argument</var>))</code>, which is calculated similar to <code>auto</code> (i.e. <code>minmax(auto, max-content)</code>), except that the track size is clamped at <var>argument</var> if it is greater than the <code>auto</code> minimum.</dd>
- <dt>{{cssxref("repeat", "repeat( [ &lt;positive-integer&gt; | auto-fill | auto-fit ] , &lt;track-list&gt; )")}}</dt>
+ <dt>{{cssxref("repeat()", "repeat( [ &lt;positive-integer&gt; | auto-fill | auto-fit ] , &lt;track-list&gt; )")}}</dt>
  <dd>Represents a repeated fragment of the track list, allowing a large number of rows that exhibit a recurring pattern to be written in a more compact form.</dd>
  <dt><code><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout">masonry</a></code>{{Experimental_Inline}}</dt>
  <dd>The masonry value indicates that this axis should be laid out according to the masonry algorithm.</dd>
@@ -87,7 +87,7 @@ <h3 id="Values">Values</h3>
 </dl>
 
 <div class="notecard warning">
-
+<h4>Note</h4>
 <p>The <code>masonry</code> value is from Level 3 of the Grid specification and currently only has an experimental implementation behind a flag in Firefox.</p>
 
 <p>The <code>subgrid</code> value is from Level 2 of the Grid specification and currently only has implementation in Firefox 71 and onwards.</p>
@@ -169,7 +169,7 @@ <h2 id="See_also">See also</h2>
 
 <ul>
  <li>Related CSS properties: {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template")}}</li>
- <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Grid_Tracks">Basic concepts of grid layout - Grid Tracks</a></em></li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#grid_tracks">Basic concepts of grid layout - Grid Tracks</a></em></li>
  <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-define-a-grid/">Defining a Grid</a></em></li>
  <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid">Subgrid</a></li>
 </ul>

files/en-us/web/css/grid-template/index.html

@@ -6,7 +6,7 @@
   - CSS Grid
   - CSS Property
   - Reference
-  - 'recipe:css-shorthand-property'
+  - recipe:css-shorthand-property
 ---
 <p>The <strong><code>grid-template</code></strong> CSS property is a <a href="/en-US/docs/Web/CSS/Shorthand_properties">shorthand property</a> for defining {{glossary("grid column", "grid columns")}}, {{glossary("grid rows", "rows")}}, and {{glossary("grid areas", "areas")}}.</p>
 
@@ -58,7 +58,7 @@ <h3 id="Values">Values</h3>
  <dt><code>[ &lt;line-names&gt;? &lt;string&gt; &lt;track-size&gt;? &lt;line-names&gt;? ]+ [ / &lt;explicit-track-list&gt; ]?</code></dt>
  <dd>Sets {{cssxref("grid-template-areas")}} to the strings listed, {{cssxref("grid-template-rows")}} to the track sizes following each string (filling in <code>auto</code> for any missing sizes), and splicing in the named lines defined before/after each size, and {{cssxref("grid-template-columns")}} to the track listing specified after the slash (or <code>none</code>, if not specified).<br>
 
- <p class="note">Note: The {{cssxref("repeat")}} function isn’t allowed in these track listings, as the tracks are intended to visually line up one-to-one with the rows/columns in the “ASCII art”.</p>
+ <p class="note">Note: The {{cssxref("repeat()")}} function isn’t allowed in these track listings, as the tracks are intended to visually line up one-to-one with the rows/columns in the “ASCII art”.</p>
  </dd>
 </dl>
 
@@ -149,7 +149,7 @@ <h2 id="See_also">See also</h2>
 <ul>
  <li>Related CSS properties: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}</li>
  <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement with CSS Grid</a></em></li>
- <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">Grid template areas - Grid definition shorthands</a></em></li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#grid_definition_shorthands">Grid template areas - Grid definition shorthands</a></em></li>
  <li>Video tutorial:<em> <a href="http://gridbyexample.com/video/grid-template-shorthand/">Grid Template shorthand</a></em></li>
 </ul>
 

files/en-us/web/css/grid/index.html

@@ -6,14 +6,15 @@
   - CSS Grid
   - CSS Property
   - Reference
-  - 'recipe:css-shorthand-property'
+  - recipe:css-shorthand-property
 ---
 <p>The <strong><code>grid</code></strong> CSS property is a <a href="/en-US/docs/Web/CSS/Shorthand_properties">shorthand property</a> that sets all of the explicit and implicit grid properties in a single declaration.</p>
 
 <div>{{EmbedInteractiveExample("pages/css/grid.html")}}</div>
 
-<div class="note">
-<p><strong>Note:</strong> You can only specify the explicit <em>or</em> the implicit grid properties in a single <code>grid</code> declaration. The sub-properties you don’t specify are set to their initial value, as normal for shorthands. Also, the gutter properties are NOT reset by this shorthand.</p>
+<div class="notecard note">
+  <h4>Note</h4>
+<p>You can only specify the explicit <em>or</em> the implicit grid properties in a single <code>grid</code> declaration. The sub-properties you don’t specify are set to their initial value, as normal for shorthands. Also, the gutter properties are NOT reset by this shorthand.</p>
 </div>
 
 <h2 id="Constituent_properties">Constituent properties</h2>
@@ -145,7 +146,7 @@ <h2 id="See_also">See also</h2>
 <ul>
  <li>Related CSS properties: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}}</li>
  <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement with CSS Grid</a></em></li>
- <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">Grid template areas - Grid definition shorthands</a></em></li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#grid_definition_shorthands">Grid template areas - Grid definition shorthands</a></em></li>
 </ul>
 
 <section id="Quick_links">