CSS Grid Alignment + Centering

css-grid practice

by allen Yu

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/shunnien/css-grid25day/master/assets/style.css">
<div class="container">
  <div class="itm itm1">1</div>
  <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 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>

CSS

.container {
          display: grid;
          grid-gap: 20px;
          height: 500px;
          border: 10px solid var(--yellow);
          grid-template-columns: repeat(5, 130px);
          /* grid-template-rows: repeat(5, 100px); */
          /* 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;
        }