gridが得意とするレイアウト

聖杯レイアウト

上にヘッダー、メイン部分が横並び3カラムになっており、下にフッターがあるレイアウトのことを「聖杯レイアウト」という。メイン部分の3カラムになっているエリアを囲むレイアウト専用の枠が必要ないという点がgridレイアウトの特徴である。
grid-templateプロパティで枠を定義するため、gridを利用すると決まった構造で縦横に結合されたような複雑なレイアウトでも必要最小限のマークアップのままレイアウトが実装できるというメリットがある。

@media screen and (min-width: 768px),print {
　.container {
　　grid-template-columns: 24% 1fr 24%;  /* 列数と列幅を指定 */
　　grid-template-rows: 100px 1fr 100px;  /* 行数と行の高さを指定 */
    /* 行列の格子で囲まれた1つひとつのセルに名前をつけ、
    1行ずつセル名を半角スペースで指定することでレイアウト枠を指定する */
　　grid-template-areas:
　　　"header header header"
　　　"lnav main sidebar"
　　　"footer footer footer";
　}
}
/* Gridアイテムの設定 */
.header {
  grid-area: header;
}
.main {
  grid-area: main;
}
.lnav {
  grid-area: lnav;
}
.sidebar {
  grid-area: sidebar;
}
.footer {
  grid-area: footer;
}

大胆に配置が変わるレイアウト

gridの場合、HTML構造とレイアウトに必要なグルーピングの構造が異なっていたとしても、物理的にHTMLタグを挿入する必要はないため、シンプルなHTML構造のまま自由なレイアウトが可能。

@media screen and (min-width: 768px),print {
 　.container {
　　grid-template-columns: 1fr 1fr 20%;
　　grid-template-rows: 200px 1fr 1fr;
　　grid-template-areas: 
　　　"title title catch"
　　　"visual visual catch"
　　　"contents1 contents2 catch";
　}
}
/*Gridアイテムの設定*/
.title {
　grid-area: title;
}
.catch {
　grid-area: catch;
}
.visual {
　grid-area: visual;
}
.contents1 {
　grid-area: contents1;
}
.contents2 {
　grid-area: contents2;
}
inserted by FC2 system