Use gap instead of grid-gap

Author: yuanchuan

index.html

@@ -231,15 +231,15 @@ <h4><a name="attribute-grid"></a><span>Grid</span></h4>
             <textarea code>
               <css-doodle grid="5">
                 :doodle {
-                  grid-gap: 1px;
                   width: 8em; height: 8em;
+                  gap: 1px;
                 }
                 background: #60569e;
               </css-doodle>
             </textarea>
             <css-doodle grid="5">
               :doodle {
-                grid-gap: 1px;
+                gap: 1px;
                 @size: 8em;
               }
               background: #60569e;
@@ -251,17 +251,17 @@ <h4><a name="attribute-grid"></a><span>Grid</span></h4>
             <textarea code>
               <css-doodle grid="1x35">
                 :doodle {
-                  grid-row-gap: 1px;
-                  @size: 8em; /* width: 8em; height: 8em; */
+                  @size: 8em 12em; /* width: 8em; height: 12em; */
+                  gap: 1px;
                 }
                 background: #60569e;
                 width: @rand(5%, 100%); /* from 5% to 100% by random */
               </css-doodle>
             </textarea>
             <css-doodle grid="1x35" click-to-update>
               :doodle {
-                grid-row-gap: 1px;
-                @size: 8em;
+                @size: 8em 12em;
+                gap: 1px;
               }
               transition: .2s ease @rand(500ms);
               background: #60569e;
@@ -430,7 +430,7 @@ <h4><a name="selector-:doodle"></a><span>:doodle</span></h4>
               :doodle {
                 @grid: 5 / 8em;
                 --s: 0;
-                grid-gap: 1px;
+                gap: 1px;
               }
               :doodle(:hover) {
                 --s: 1;
@@ -451,15 +451,15 @@ <h4><a name="selector-:container"></a><span>:container</span></h4>
           <p>
             The <code>:container</code>
             is the container element that holds all the cells, which is using <a href="https://www.w3.org/TR/css-grid-1/">Grid Layout</a>.
-            You may want to set <code>grid-gap</code> inside it.
+            You may want to set <code>gap</code> inside it.
           </p>
           <p class="has-preview">
             <textarea code>
               :doodle {
                 overflow: hidden;
               }
               :container {
-                grid-gap: 1px;
+                gap: 1px;
                 transform: rotate(45deg) scale(1.5);
               }
             </textarea>
@@ -469,7 +469,7 @@ <h4><a name="selector-:container"></a><span>:container</span></h4>
                 overflow: hidden;
               }
               :container {
-                grid-gap: 1px;
+                gap: 1px;
                 transform: rotate(45deg) scale(1.5);
               }
               background: #60569e;
@@ -481,7 +481,7 @@ <h4><a name="selector-:container"></a><span>:container</span></h4>
           <p class="no-preview">
             <textarea code>
               :doodle {
-                grid-gap: 1px;
+                gap: 1px;
               }
             </textarea>
           </p>
@@ -512,7 +512,7 @@ <h4><a name="selector-@nth"></a><span>@nth(n, ...)</span></h4>
             <css-doodle grid="5">
               :doodle {
                 @size: 8em;
-                grid-gap: 1px;
+                gap: 1px;
               }
               background: #f5f5f5;
               :nth-child(1) {
@@ -597,7 +597,7 @@ <h4><a name="selector-@at"></a><span>@at(col, row)</span></h4>
             <css-doodle grid="5">
               :doodle {
                 @size: 8em;
-                grid-gap: 1px;
+                gap: 1px;
               }
               background: #f5f5f5;
               @at(4, 2) {
@@ -624,7 +624,7 @@ <h4><a name="selector-@random"></a><span>@random([ ratio ])</span></h4>
             <css-doodle grid="5" click-to-update>
               :doodle {
                 @size: 8em;
-                grid-gap: 1px;
+                gap: 1px;
               }
               background: #f5f5f5;
               transition: .2s;
@@ -938,7 +938,7 @@ <h4><a name="property-@grid"></a><span>@grid</span></h4>
             <css-doodle grid="5">
               :doodle {
                 @grid: 8 / 8em;
-                grid-gap: 1px;
+                gap: 1px;
               }
               background: #60569e;
             </css-doodle>
@@ -1513,7 +1513,7 @@ <h4><a name="function-@repeat"></a><span>@repeat(times, value)</span></h4>
               }
             </textarea>
             <css-doodle grid="5" click-to-update>
-              :doodle { @size: 8em; grid-gap: 1px }
+              :doodle { @size: 8em; gap: 1px }
               background: #60569e;
               transition: .2s;
               transform: scale(.95);
@@ -1950,7 +1950,7 @@ <h4><a name="function-@hex"></a><span>@hex(num)</span></h4>
               }
             </textarea>
             <css-doodle grid="5" click-to-update>
-              :doodle { @size: 8em; grid-gap: 1px }
+              :doodle { @size: 8em; gap: 1px }
               :after {
                 content: \@hex(@rand(9632, 9687));
                 color: #60569e;