CSS Gridを使って簡単なレイアウトを作りながら理解を深めよう　

<div class="container">
  <div class="header">header</div>
  <div class="smallbox smallbox--1">small-1</div>
  <div class="smallbox smallbox--2">small-2</div>
  <div class="smallbox smallbox--3">small-3</div>
  <div class="main-content">main-content</div>
  <div class="sidebar">sidebar</div>
  <div class="footer">footer</div>
</div>

.container {
  background-image: linear-gradient(90deg, rgba(233, 233, 233, 1), rgba(172, 172, 172, 1));
  margin: 30px auto;

  display: grid;
  grid-template-rows: 100px 200px 400px 100px;　//rowは画面幅が変わっても変わらないのでpx指定

  //columnとgapは画面幅に合わせて調整されるようにする（今回サイドバーは固定幅）
  grid-template-columns:repeat(3, 1fr) 200px; //サイドバーは他のカラムより小さいので等分ではない
  grid-gap: 1.5rem;

　//子要素全体の指定
  & > * {
    background-image: linear-gradient(90deg, rgba(144, 245, 154, 1), rgba(4, 202, 255, 1));
    color: #fff;
    font-size: 30px;
    font-family: sans-serif;
    padding:20px;
  }

.header {
    //grid-rowを入れてもいいけどアルゴリズムの自動配置があるので不要
    grid-column: 1 / -1;
    
  }

.sidebar {
    //spanはセルの範囲　span 2 とすると2セル分
    grid-row: 2 / span 2;

    //grid-column: 4 / -1;でも間違いではない
    grid-column: 4 / 5;
  }

.main-content {
    //grid-row = これも自動配置のため書かなくてOK
    grid-column: 1 / span 3;

  }

 .footer {
    //grid-rowは自動配置
    grid-column: 1 / -1;
  }
} //--container

.container {
  background-image: linear-gradient(90deg, rgba(233, 233, 233, 1), rgba(172, 172, 172, 1));
  margin: 30px auto;

  display: grid;

//rowグのリッド線に名前をつける
  grid-template-rows: [header-start] 100px [header-end small-start] 200px [small-end main-start] 400px [main-end footer-start] 100px [footer-end];

//columnのグリッド線に名前をつける
//repeat()で作ったグリッドにも名前を入れます。その際、リピートの数だけ自動で１から順番に番号が振られます。
  grid-template-columns:repeat(3, [col-start] 1fr [col-end]) 200px [grid-end];
  grid-gap: 30px;

  & > * {
    background-image: linear-gradient(90deg, rgba(144, 245, 154, 1), rgba(4, 202, 255, 1));
    color: #fff;
    font-size: 30px;
    font-family: sans-serif;
    padding:20px;
  }

//プロパティで使用するときは、[]なしで名前のみ記載すればOK。番号は半角スペースを開けて記述
  .header {
    grid-column: col-start 1 / grid-end ;
  }

  .sidebar {
    grid-row: header-end / footer-start;
    grid-column: col-end 3 / grid-end;
  }

  .smallbox {
    //grid-row: 2 / 3; 自動配置のため不要

  }

  .main-content {
    grid-column: col-start 1 / col-end 3;

  }

  .footer {
    grid-column: col-start 1 / grid-end;
  }
}

.container {
  background-image: linear-gradient(90deg, rgba(233, 233, 233, 1), rgba(172, 172, 172, 1));
  margin: 30px auto;
  
  display: grid;
  grid-template-rows:  100px  200px 400px 100px;
  
  grid-template-columns:repeat(3, 1fr) 200px;
  
  grid-template-areas: "head head head head"
                       "box-1 box-2 box-3 side"
                       "main main main side"
                       "foot foot foot foot";
//空のセルを作りたいときは.（ドット）を使います。例）". head head ."
  
  grid-gap: 30px;
  
  & > * {
    background-image: linear-gradient(90deg, rgba(144, 245, 154, 1), rgba(4, 202, 255, 1));
    color: #fff;
    font-size: 30px;
    font-family: sans-serif;
    padding:20px;
  }
  
  .header {
    grid-area: head; 
  }
  
  .sidebar {
    grid-area: side ;
    
  }
  
  .smallbox--1 {grid-area: box-1;}
  .smallbox--2 {grid-area: box-2;}
  .smallbox--3 {grid-area: box-3;}
  
  .main-content {
    grid-area: main;   
  }
  
  .footer {
    grid-area: foot;   
  }
}