Merge pull request mdn#143 from OnkarRuikar/patch-1

Update grid auto placement example

Author: estelle

grid/docs/autoplacement.html

@@ -30,7 +30,7 @@
     <style class="editable">
       .wrapper {
         display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+        grid-template-columns: repeat(3, minmax(120px, 1fr));
         gap: 10px;
         grid-auto-flow: dense;
       }
@@ -48,19 +48,17 @@
             <li class="landscape"><img src="landscape.jpg" alt="placeholder"></li>
             <li class="landscape"><img src="landscape.jpg" alt="placeholder"></li>
             <li class="landscape"><img src="landscape.jpg" alt="placeholder"></li>
-            <li><img src="portrait.jpg" alt="placeholder"></li>
-            <li><img src="portrait.jpg" alt="placeholder"></li>
             <li class="landscape"><img src="landscape.jpg" alt="placeholder"></li>
             <li><img src="portrait.jpg" alt="placeholder"></li>
             <li><img src="portrait.jpg" alt="placeholder"></li>
             <li><img src="portrait.jpg" alt="placeholder"></li>
-         </ul>>
+         </ul>
     </section>
 
     <textarea class="playable playable-css" style="height: 200px;">
 .wrapper {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  grid-template-columns: repeat(3, minmax(120px, 1fr));
   gap: 10px;
   grid-auto-flow: dense;
 }
@@ -72,13 +70,10 @@
 
     <textarea class="playable playable-html" style="height: 300px;">
 <ul class="wrapper">
-    <li><img src="./portrait.jpg" alt="placeholder"></li>
-    <li class="landscape"><img src="landscape.jpg" alt="placeholder"></li>
     <li><img src="portrait.jpg" alt="placeholder"></li>
     <li class="landscape"><img src="landscape.jpg" alt="placeholder"></li>
     <li class="landscape"><img src="landscape.jpg" alt="placeholder"></li>
-    <li><img src="portrait.jpg" alt="placeholder"></li>
-    <li><img src="portrait.jpg" alt="placeholder"></li>
+    <li class="landscape"><img src="landscape.jpg" alt="placeholder"></li>
     <li class="landscape"><img src="landscape.jpg" alt="placeholder"></li>
     <li><img src="portrait.jpg" alt="placeholder"></li>
     <li><img src="portrait.jpg" alt="placeholder"></li>