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

Post on:2017年4月3日

sponsors

生成 AI と著作権？5分で分かるAdobe Fireflyの安全な商用利用のための設計 | アドビ公式

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";
}