Grid ทวน

✨ Jabont

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        background:#eee;
        margin:10px;
        font-family:sans-serif;
      }
      .grid{
        display:grid;
/*         grid-template-columns:100px auto; */
        grid-template-columns:repeat(3,1fr);
        grid-auto-rows:100px;
        grid-gap:10px;
      }
      .grid > div{
        background:pink;
        box-sizing:border-box;
        border:2px solid red;
        
      }
      #grid-sidebar{
        grid-column:1/2;
        grid-row:1/4;
      }
      #grid-footer{
        grid-column:1/4;
        grid-row:4/5;
      }
    </style>
  </head>
  <body>
    <div class="grid">
      <div id="grid-sidebar">
        1
      </div>
      <div>
        2
      </div>
      <div>
        3
      </div>
      <div>
        4
      </div>
      <div>
        5
      </div>
      <div>
        6
      </div>
      <div>
        7
      </div>
      <div id="grid-footer">
        8
      </div>
    </div>
  </body>
</html>