CSS Grid Layoutに触れてみよう！ CSS Grid Layoutのテンプレート定義を簡単に作成できるジェネレーター

Post on:2017年4月3日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp 2024年11月22日金曜日開催 20時から21時

Webページをレイアウトする際にfloatを使って、そして去年あたりからはflexboxを使っての実装が増えてきたと思います。
CSS Grid Layoutはようやくすべてのデスクトップブラウザでサポートされたばかりですが、レイアウトすることに特化されており、シンプルな記述でより柔軟なレイアウトを実装することが可能です。

CSS Grid Layoutのテンプレート定義を簡単に作成できるジェネレーターを紹介します。
CSS Grid Layoutってどんな感じ？という人にもいいかもしれません。

CSS Grid Template Builder

CSS Grid Layoutでレイアウトをするには、「grid-area」プロパティを使って、グリッドの定義をすることから始めます。例えば、通常のページの場合、ヘッダ・フッタ・コンテンツ・サイドバー2つのエリアを定義します。

.hg__header { grid-area: header; }
.hg__footer { grid-area: footer; }
.hg__main { grid-area: main; }
.hg__left { grid-area: navigation; }
.hg__right { grid-area: ads; }

.hg__header { grid-area: header; }

.hg__footer { grid-area: footer; }

.hg__main { grid-area: main; }

.hg__left { grid-area: navigation; }

.hg__right { grid-area: ads; }

次に「grid-template-areas」プロパティを使って、グリッドのレイアウトを視覚的に指定します。各エリアをスペースで区切り、リスト状に記述します。

.hg {
    display: grid;
    grid-template-areas: "header header header"
                         "navigation main ads"
                         "footer footer footer";
}