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

1カラムのシンプルなグリッドレイアウト
1カラムでもメニュー部分のグリッドレイアウトにしたりと拡張を考えるとグリッドデザインにしておくのはありですね

レイアウト一覧ページへ

デモページ

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 ="footer" class="item">footer</div>

css

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

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

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

@media screen and (max-width: 780px) {}