grid 「レイアウトモジュール」

<style type="text/css">
#c_header {
  grid-area: header;   /* エリア名 */
  background-color : #ffe4e1;
}
#c_main {
  grid-area: main;     /* エリア名 */
  background-color : #CCFFCC;
}
#c_menu {
  grid-area: menu;     /* エリア名 */
  background-color : #FFFFCC;
}
#c_banner {
  grid-area: banner;   /* エリア名 */
  background-color : #e0ffff;
}
#c_footer {
  grid-area: footer;   /* エリア名 */
  background-color : #D3D3D3;
}

#sample_area {
  text-align:center;
  /* gridの使用を定義 */
  display: grid;
  /* エリアの並び順を定義 */
  grid-template-areas   : "header header header"
                             "menu   main   banner"
                             "footer footer footer";
  /* カラム（列）の幅を定義 */
  grid-template-columns : 25% 55% 20%;
  /* 行の高さを定義 */
  grid-template-rows    : 50px 200px 30px;
}

/* ブラウザ幅が500px以下の場合の表示制御 */
@media screen and (max-width: 550px) {
  #sample_area {
    grid-template-areas   : "header" "menu" "main" "banner" "footer";
    grid-template-columns : 100%;
    grid-template-rows    : 50px 50px 200px 50px 30px;
  }
}


<!-- html -->
<div style="width:100%;max-width:400px;border: 1px solid #333">
  <div id="sample_area">
    <div id="c_header">Title</div>
    <div id="c_main">Main</div>
    <div id="c_menu">Menu</div>
    <div id="c_banner">Bannar</div>
    <div id="c_footer">Footer</div>
  </div>
</div>