Add grid

Author: jgthms

_includes/collections/animations.html

@@ -37,6 +37,7 @@
       <li><a class="menu-collection-link{% if page.collection_name == 'Backgrounds' %} menu-collection-link--active{% endif %}" href="{{site.url}}/backgrounds/">Backgrounds</a></li>
       <li><a class="menu-collection-link{% if page.collection_name == 'Box model' %} menu-collection-link--active{% endif %}" href="{{site.url}}/box-model/">Box model</a></li>
       <li><a class="menu-collection-link{% if page.collection_name == 'Flexbox' %} menu-collection-link--active{% endif %}" href="{{site.url}}/flexbox/">Flexbox</a></li>
+      <li><a class="menu-collection-link{% if page.collection_name == 'Grid' %} menu-collection-link--active{% endif %}" href="{{site.url}}/css-grid/">CSS Grid</a></li>
       <li><a class="menu-collection-link{% if page.collection_name == 'Positioning' %} menu-collection-link--active{% endif %}" href="{{site.url}}/positioning/">Positioning</a></li>
       <li><a class="menu-collection-link{% if page.collection_name == 'Transitions' %} menu-collection-link--active{% endif %}" href="{{site.url}}/transitions/">Transitions</a></li>
       <li><a class="menu-collection-link{% if page.collection_name == 'Typography' %} menu-collection-link--active{% endif %}" href="{{site.url}}/typography/">Typography</a></li>

_includes/collections/backgrounds.html

@@ -65,6 +65,7 @@ <h2 class="header-title">
         <a href="{{site.url}}/backgrounds/">Backgrounds</a>
         <a href="{{site.url}}/box-model/">Box model</a>
         <a href="{{site.url}}/flexbox/">Flexbox</a>
+        <a class="is-new" href="{{site.url}}/css-grid/">CSS Grid <span class="tag">New!</span></a>
         <a href="{{site.url}}/positioning/">Positioning</a>
         <a href="{{site.url}}/transitions/">Transitions</a>
         <a href="{{site.url}}/typography/">Typography</a>

_includes/collections/box-model.html

@@ -11,14 +11,14 @@
         </a>
       <a class="property-links-direct" href="{{site.url}}/property/align-content/" data-property-name="align-content" data-tooltip="Single page for this property">Permalink</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="align-content">Share</a>
-        <a target="_blank" href="https://caniuse.com/#feat=flexbox" data-tooltip="See on Can I use..." rel="external">Can I use</a>
+        <a target="_blank" href="http://caniuse.com/#feat=flexbox" data-tooltip="See on Can I use..." rel="external">Can I use</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/align-content" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
     </nav>
     <h2 class="property-name">
       <a href="#align-content"><span>#</span>align-content</a>
     </h2>
     <div class="property-description">
-      <p>Defines how each line is aligned within a flexbox container. It only applies if <code>flex-wrap: wrap</code> is present, and if there are <strong>multiple lines</strong> of flexbox items.</p>
+      <p>Defines how each line is aligned within a flexbox/grid container. It only applies if <code>flex-wrap: wrap</code> is present, and if there are <strong>multiple lines</strong> of flexbox/grid items.</p>
 
     </div>
 
@@ -72,7 +72,7 @@ <h2 class="property-name">
           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-content: flex-start;">align-content: flex-start;</code>
         </p>
         <div class="example-description">
-          <p>Each line will only fill the space it <em>needs</em>. They will all move towards the <strong>start</strong> of the flexbox container&#39;s cross axis.</p>
+          <p>Each line will only fill the space it <em>needs</em>. They will all move towards the <strong>start</strong> of the flexbox/grid container&#39;s cross axis.</p>
 
         </div>
       </header>
@@ -94,7 +94,7 @@ <h2 class="property-name">
           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-content: flex-end;">align-content: flex-end;</code>
         </p>
         <div class="example-description">
-          <p>Each line will only fill the space it <em>needs</em>. They will all move towards the <strong>end</strong> of the flexbox container&#39;s cross axis.</p>
+          <p>Each line will only fill the space it <em>needs</em>. They will all move towards the <strong>end</strong> of the flexbox/grid container&#39;s cross axis.</p>
 
         </div>
       </header>
@@ -116,7 +116,7 @@ <h2 class="property-name">
           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-content: center;">align-content: center;</code>
         </p>
         <div class="example-description">
-          <p>Each line will only fill the space it <em>needs</em>. They will all move towards the <strong>center</strong> of the flexbox container&#39;s cross axis.</p>
+          <p>Each line will only fill the space it <em>needs</em>. They will all move towards the <strong>center</strong> of the flexbox/grid container&#39;s cross axis.</p>
 
         </div>
       </header>

_includes/collections/flexbox.html

@@ -11,7 +11,7 @@
         </a>
       <a class="property-links-direct" href="{{site.url}}/property/align-items/" data-property-name="align-items" data-tooltip="Single page for this property">Permalink</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="align-items">Share</a>
-        <a target="_blank" href="https://caniuse.com/#feat=flexbox" data-tooltip="See on Can I use..." rel="external">Can I use</a>
+        <a target="_blank" href="http://caniuse.com/#feat=flexbox" data-tooltip="See on Can I use..." rel="external">Can I use</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/align-items" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
     </nav>
     <h2 class="property-name">

_includes/collections/transitions.html

@@ -11,7 +11,7 @@
         </a>
       <a class="property-links-direct" href="{{site.url}}/property/align-self/" data-property-name="align-self" data-tooltip="Single page for this property">Permalink</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="align-self">Share</a>
-        <a target="_blank" href="https://caniuse.com/#feat=flexbox" data-tooltip="See on Can I use..." rel="external">Can I use</a>
+        <a target="_blank" href="http://caniuse.com/#feat=flexbox" data-tooltip="See on Can I use..." rel="external">Can I use</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/align-self" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
     </nav>
     <h2 class="property-name">

_includes/collections/typography.html

@@ -11,7 +11,7 @@
         </a>
       <a class="property-links-direct" href="{{site.url}}/property/animation-delay/" data-property-name="animation-delay" data-tooltip="Single page for this property">Permalink</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="animation-delay">Share</a>
-        <a target="_blank" href="https://caniuse.com/#feat=css-animation" data-tooltip="See on Can I use..." rel="external">Can I use</a>
+        <a target="_blank" href="http://caniuse.com/#feat=css-animation" data-tooltip="See on Can I use..." rel="external">Can I use</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/animation-delay" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
     </nav>
     <h2 class="property-name">

_includes/lists/finder-list.html

@@ -11,7 +11,7 @@
         </a>
       <a class="property-links-direct" href="{{site.url}}/property/animation-direction/" data-property-name="animation-direction" data-tooltip="Single page for this property">Permalink</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="animation-direction">Share</a>
-        <a target="_blank" href="https://caniuse.com/#feat=css-animation" data-tooltip="See on Can I use..." rel="external">Can I use</a>
+        <a target="_blank" href="http://caniuse.com/#feat=css-animation" data-tooltip="See on Can I use..." rel="external">Can I use</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/animation-direction" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
     </nav>
     <h2 class="property-name">

_includes/lists/menu-list.html

@@ -11,7 +11,7 @@
         </a>
       <a class="property-links-direct" href="{{site.url}}/property/animation-duration/" data-property-name="animation-duration" data-tooltip="Single page for this property">Permalink</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="animation-duration">Share</a>
-        <a target="_blank" href="https://caniuse.com/#feat=css-animation" data-tooltip="See on Can I use..." rel="external">Can I use</a>
+        <a target="_blank" href="http://caniuse.com/#feat=css-animation" data-tooltip="See on Can I use..." rel="external">Can I use</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/animation-duration" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
     </nav>
     <h2 class="property-name">

_includes/menu.html

@@ -11,7 +11,7 @@
         </a>
       <a class="property-links-direct" href="{{site.url}}/property/animation-fill-mode/" data-property-name="animation-fill-mode" data-tooltip="Single page for this property">Permalink</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="animation-fill-mode">Share</a>
-        <a target="_blank" href="https://caniuse.com/#feat=css-animation" data-tooltip="See on Can I use..." rel="external">Can I use</a>
+        <a target="_blank" href="http://caniuse.com/#feat=css-animation" data-tooltip="See on Can I use..." rel="external">Can I use</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/animation-fill-mode" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
     </nav>
     <h2 class="property-name">

css/website.css

@@ -11,7 +11,7 @@
         </a>
       <a class="property-links-direct" href="{{site.url}}/property/animation-iteration-count/" data-property-name="animation-iteration-count" data-tooltip="Single page for this property">Permalink</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="animation-iteration-count">Share</a>
-        <a target="_blank" href="https://caniuse.com/#feat=css-animation" data-tooltip="See on Can I use..." rel="external">Can I use</a>
+        <a target="_blank" href="http://caniuse.com/#feat=css-animation" data-tooltip="See on Can I use..." rel="external">Can I use</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/animation-iteration-count" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
     </nav>
     <h2 class="property-name">

index.html

@@ -11,7 +11,7 @@
         </a>
       <a class="property-links-direct" href="{{site.url}}/property/animation-name/" data-property-name="animation-name" data-tooltip="Single page for this property">Permalink</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="animation-name">Share</a>
-        <a target="_blank" href="https://caniuse.com/#feat=css-animation" data-tooltip="See on Can I use..." rel="external">Can I use</a>
+        <a target="_blank" href="http://caniuse.com/#feat=css-animation" data-tooltip="See on Can I use..." rel="external">Can I use</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/animation-name" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
     </nav>
     <h2 class="property-name">

property/align-content/index.html

@@ -11,7 +11,7 @@
         </a>
       <a class="property-links-direct" href="{{site.url}}/property/animation-play-state/" data-property-name="animation-play-state" data-tooltip="Single page for this property">Permalink</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="animation-play-state">Share</a>
-        <a target="_blank" href="https://caniuse.com/#feat=css-animation" data-tooltip="See on Can I use..." rel="external">Can I use</a>
+        <a target="_blank" href="http://caniuse.com/#feat=css-animation" data-tooltip="See on Can I use..." rel="external">Can I use</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/animation-play-state" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
     </nav>
     <h2 class="property-name">

property/align-items/index.html

@@ -11,7 +11,7 @@
         </a>
       <a class="property-links-direct" href="{{site.url}}/property/animation-timing-function/" data-property-name="animation-timing-function" data-tooltip="Single page for this property">Permalink</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="animation-timing-function">Share</a>
-        <a target="_blank" href="https://caniuse.com/#feat=css-animation" data-tooltip="See on Can I use..." rel="external">Can I use</a>
+        <a target="_blank" href="http://caniuse.com/#feat=css-animation" data-tooltip="See on Can I use..." rel="external">Can I use</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/animation-timing-function" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
     </nav>
     <h2 class="property-name">

property/align-self/index.html

@@ -11,7 +11,7 @@
         </a>
       <a class="property-links-direct" href="{{site.url}}/property/animation/" data-property-name="animation" data-tooltip="Single page for this property">Permalink</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="animation">Share</a>
-        <a target="_blank" href="https://caniuse.com/#feat=css-animation" data-tooltip="See on Can I use..." rel="external">Can I use</a>
+        <a target="_blank" href="http://caniuse.com/#feat=css-animation" data-tooltip="See on Can I use..." rel="external">Can I use</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/animation" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
     </nav>
     <h2 class="property-name">

property/animation-delay/index.html

@@ -11,7 +11,7 @@
         </a>
       <a class="property-links-direct" href="{{site.url}}/property/background-attachment/" data-property-name="background-attachment" data-tooltip="Single page for this property">Permalink</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="background-attachment">Share</a>
-        <a target="_blank" href="https://caniuse.com/#feat=background-attachment" data-tooltip="See on Can I use..." rel="external">Can I use</a>
+        <a target="_blank" href="http://caniuse.com/#feat=background-attachment" data-tooltip="See on Can I use..." rel="external">Can I use</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/background-attachment" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
     </nav>
     <h2 class="property-name">

property/animation-direction/index.html

@@ -58,7 +58,7 @@ <h2 class="property-name">
           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="background-image: url(/images/jt.png);">background-image: url(/images/jt.png);</code>
         </p>
         <div class="example-description">
-          <p>Uses the image defined in the <strong>url</strong> path. This path can either be <em>relative</em> (to the css file) or <em>absolute</em> (like <code>https://cssreference.io/images/jt.png</code>).</p>
+          <p>Uses the image defined in the <strong>url</strong> path. This path can either be <em>relative</em> (to the css file) or <em>absolute</em> (like <code>http://cssreference.io/images/jt.png</code>).</p>
 
         </div>
       </header>
@@ -211,7 +211,7 @@ <h2 class="property-name">
           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="background-image: radial-gradient(circle closest-side at 45px 45px, green 0%, purple 20%, orange 100%);">background-image: radial-gradient(circle closest-side at 45px 45px, green 0%, purple 20%, orange 100%);</code>
         </p>
         <div class="example-description">
-          <p>Like with the <a href="https://cssreference.io/#background-position"><code>background-position</code></a>, you can specify the <strong>position</strong> of the gradient.</p>
+          <p>Like with the <a href="http://cssreference.io/#background-position"><code>background-position</code></a>, you can specify the <strong>position</strong> of the gradient.</p>
 
         </div>
       </header>

property/animation-duration/index.html

@@ -14,7 +14,7 @@ <h2 class="property-name">
       <a href="#border-bottom-color"><span>#</span>border-bottom-color</a>
     </h2>
     <div class="property-description">
-      <p>Like <code class="shorthand"><a href="https://cssreference.io/#border-color">border-color</a></code>, but for the <strong>bottom</strong> border only.</p>
+      <p>Like <code class="shorthand"><a href="http://cssreference.io/#border-color">border-color</a></code>, but for the <strong>bottom</strong> border only.</p>
 
     </div>
 

property/animation-fill-mode/index.html

@@ -14,7 +14,7 @@ <h2 class="property-name">
       <a href="#border-bottom-style"><span>#</span>border-bottom-style</a>
     </h2>
     <div class="property-description">
-      <p>Like <code class="shorthand"><a href="https://cssreference.io/#border-style">border-style</a></code>, but for the <strong>bottom</strong> border only.</p>
+      <p>Like <code class="shorthand"><a href="http://cssreference.io/#border-style">border-style</a></code>, but for the <strong>bottom</strong> border only.</p>
 
     </div>
 

property/animation-iteration-count/index.html

@@ -17,7 +17,7 @@ <h2 class="property-name">
       <a href="#border-bottom-width"><span>#</span>border-bottom-width</a>
     </h2>
     <div class="property-description">
-      <p>Like <code class="shorthand"><a href="https://cssreference.io/#border-width">border-width</a></code>, but for the <strong>bottom</strong> border only.</p>
+      <p>Like <code class="shorthand"><a href="http://cssreference.io/#border-width">border-width</a></code>, but for the <strong>bottom</strong> border only.</p>
 
     </div>
 

property/animation-name/index.html

@@ -14,7 +14,7 @@ <h2 class="property-name">
       <a href="#border-left-color"><span>#</span>border-left-color</a>
     </h2>
     <div class="property-description">
-      <p>Like <code class="shorthand"><a href="https://cssreference.io/#border-color">border-color</a></code>, but for the <strong>left</strong> border only.</p>
+      <p>Like <code class="shorthand"><a href="http://cssreference.io/#border-color">border-color</a></code>, but for the <strong>left</strong> border only.</p>
 
     </div>
 

property/animation-play-state/index.html

@@ -14,7 +14,7 @@ <h2 class="property-name">
       <a href="#border-left-style"><span>#</span>border-left-style</a>
     </h2>
     <div class="property-description">
-      <p>Like <code class="shorthand"><a href="https://cssreference.io/#border-style">border-style</a></code>, but for the <strong>left</strong> border only.</p>
+      <p>Like <code class="shorthand"><a href="http://cssreference.io/#border-style">border-style</a></code>, but for the <strong>left</strong> border only.</p>
 
     </div>
 

property/animation-timing-function/index.html

@@ -17,7 +17,7 @@ <h2 class="property-name">
       <a href="#border-left-width"><span>#</span>border-left-width</a>
     </h2>
     <div class="property-description">
-      <p>Like <code class="shorthand"><a href="https://cssreference.io/#border-width">border-width</a></code>, but for the <strong>left</strong> border only.</p>
+      <p>Like <code class="shorthand"><a href="http://cssreference.io/#border-width">border-width</a></code>, but for the <strong>left</strong> border only.</p>
 
     </div>
 

property/animation/index.html

@@ -14,7 +14,7 @@ <h2 class="property-name">
       <a href="#border-right-color"><span>#</span>border-right-color</a>
     </h2>
     <div class="property-description">
-      <p>Like <code class="shorthand"><a href="https://cssreference.io/#border-color">border-color</a></code>, but for the <strong>right</strong> border only.</p>
+      <p>Like <code class="shorthand"><a href="http://cssreference.io/#border-color">border-color</a></code>, but for the <strong>right</strong> border only.</p>
 
     </div>