実際に使ってみる

試しにこういう画面を作ってみる。聖杯レイアウトっていうんだっけ？

DOM構成はこんな感じ

<div id="main">
  <div id="header">Header</div>
  <div id="menu">Menu</div>
  <div id="right-menu">Right Menu</div>
  <div id="contents">Contents</div>
  <div id="footer">Footer</div>
</div>

分割方法を決める

こんな感じで分割する。

ラインを指定して作ってみる

コンテナを定義する

/* Gridコンテナ */
#main {
  display: grid;
  grid-template-rows: 80px 1fr 80px;
  grid-template-columns: 120px 3fr 1fr;
}

各アイテムを定義する

#header {
  /* grid-area: 1 / 1 / 2 / 4; でもOK */
  grid-row: 1 / 2;
  grid-column: 1 / 4;
}
#menu {
  /* grid-area: 2 / 1 / 3 / 2; でもOK */
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}
#contents {
  /* grid-area: 2 / 2 / 3 / 3; でもOK */
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}
#right-menu {
  /* grid-area: 2 / 3 / 3 / 4; でもOK */
  grid-row: 2 / 3;
  grid-column: 3 / 4;
}
#footer {
  /* grid-area: 3 / 1 / 4 / 4; でもOK */
  grid-row: 3 / 4;
  grid-column: 1 / 4;
}

デモ：https://jsfiddle.net/6Leuh2a6/

エリアを指定して作ってみる

コンテナを定義する

/* Gridコンテナ */
#main {
  display: grid;
  grid-template-rows: 80px 1fr 80px;
  grid-template-columns: 120px 3fr 1fr;
  grid-template-areas:
    "header header   header"
    "menu   contents right-menu"
    "footer footer   footer";
}

各アイテムを定義する

#header {
  grid-area: header;
}
#menu {
  grid-area: menu;
}
#contents {
  grid-area: contents;
}
#right-menu {
  grid-area: right-menu;
}
#footer {
  grid-area: footer;
}

デモ：https://jsfiddle.net/dbhs7usb/1/

次回：レスポンシブデザイン対応してみる