2カラムレイアウトのソースコード

2カラムのシンプルなグリッドレイアウト
右側サイドバー部分の幅を固定、メインカラムになる部分を可変幅としてあります
画面・ウィンドウサイズ幅が一定サイズ以下の場合はサイドバー部分をメインの下に置いて１カラムに切り替えています

html

<div id ="container">
<div id ="header" class="item">header</div>
<div id ="menu" class="item">menu</div>
<div id ="main" class="item">main</div>
<div id ="side" class="item">side</div>
<div id ="footer" class="item">footer</div>
</div>

css

#container {
  min-height:100vh;
  display: grid;
  grid-template-columns: 1fr 350px;
  grid-template-rows: 150px 50px 1fr 150px;
  grid-gap: 10px;
  grid-template-areas:
    "header header"
    "menu menu"
    "main side"
    "footer footer";
}

#header {
  grid-area: header;
}
#menu {
  grid-area: menu;
}
#main {
  grid-area: main;
}
#sub {
  grid-area: side;
}
#footer {
  grid-area: footer;
}

/*画面またはウィンドウ最大幅でカラムを変更*/
@media screen and (max-width: 950px) {

  #container {
    grid-template-columns: 1fr;
    grid-template-rows: 100px 50px 1fr 1fr 100px;
    grid-template-areas:
      "header"
      "menu"
      "main"
      "sub"
      "footer";
  }
}

/*各要素の共通設定実装では不要かと*/
.item {
  background:#ffcc99;
  display: flex;
  align-items: center;
  justify-content: center;
}