17 - CSS Grid Alignment + Centering Finished

Author: jonathanedempsey

17 - CSS Grid Alignment + Centering/alignment-and-centering-START.html

@@ -14,42 +14,12 @@
     <div class="itm itm2">2</div>
     <div class="itm itm3">3</div>
     <div class="itm itm4">4</div>
-    <div class="itm itm5">5</div>
+    <div class="itm itm5">Dempo</div>
     <div class="itm itm6">6</div>
     <div class="itm itm7">7</div>
     <div class="itm itm8">8</div>
     <div class="itm itm9">9</div>
     <div class="itm itm10">10</div>
-    <div class="itm itm11">11</div>
-    <div class="itm itm12">12</div>
-    <div class="itm itm13">13</div>
-    <div class="itm itm14">14</div>
-    <div class="itm itm15">15</div>
-    <div class="itm itm16">16</div>
-    <div class="itm itm17">17</div>
-    <div class="itm itm18">18</div>
-    <div class="itm itm19">19</div>
-    <div class="itm itm20">20</div>
-    <div class="itm itm21">21</div>
-    <div class="itm itm22">22</div>
-    <div class="itm itm23">23</div>
-    <div class="itm itm24">24</div>
-    <div class="itm itm25">25</div>
-    <div class="itm itm26">26</div>
-    <div class="itm itm27">27</div>
-    <div class="itm itm28">28</div>
-    <div class="itm itm29">29</div>
-    <div class="itm itm30">30</div>
-    <div class="itm itm31">31</div>
-    <div class="itm itm32">32</div>
-    <div class="itm itm33">33</div>
-    <div class="itm itm34">34</div>
-    <div class="itm itm35">35</div>
-    <div class="itm itm36">36</div>
-    <div class="itm itm37">37</div>
-    <div class="itm itm38">38</div>
-    <div class="itm itm39">39</div>
-    <div class="itm itm40">40</div>
   </div>
 
   <style>
@@ -70,9 +40,25 @@
     .container {
       display: grid;
       grid-gap: 20px;
-      grid-template-columns: repeat(10, 1fr);
+      height: 500px;
+      border: 5px solid blue;
+      grid-template-columns: repeat(5, 130px);
+      /* justify-items: center;
+      align-items: center; */
+      place-items: stretch stretch;
+      justify-content: space-between;
+      align-content: space-between;
+    }
+
+    .itm {
+      background: white;
+    }
+
+    .itm5 {
+      justify-self: center;
+      align-self: center;
     }
   </style>
 </body>
 
-</html>
+</html>