CSS Grid Layoutは、とても簡単というはなし。
CSS grid starter kit - JSFiddle
はじめに
CSS Grid Layoutは複雑なレイアウトの実装をとても簡単にしてくれます。
ただ、機能が豊富だったり考え方が少し複雑なところもあるので、このような素敵な記事もあるんですが、ハードルが高いとかちょっと億劫だったりするデザイナーさんもいるかもしれません。
なので、今回は簡単で実用的なコピペコードとデモを通じて、Gridの素晴らしさを伝えたいと思います🍟
これを作ってみます。
デモはこれです。
=> CSS grid starter kit - JSFiddle
もしかしたらこれを触ってみるだけで大体理解できるかもしれません。
明示的に名前をつけてグリッドを作れる
CSS Gridの素敵なポイントのひとつとしてあげておきたいのが、ここなんです。
自分でグリッドに名前をつけることでエリアを作り、それを割り当てることができます。
というわけで、一般的なレイアウトのHTMLを用意します。
<div class="wrap">
<header class="header">Header</header>
<aside class="sidebar">Sidebar</aside>
<main class="main">Main</main>
<footer class="footer">Footer</footer>
</div>
グリッドコンテナの作成
wrap がそれぞれの親(グリッドコンテナ)に当たりますが、これに Grid の指定を記述していきます。
ここで行うことは、
- グリッドエリアの間隔
- グリッドエリアの高さ (row)
- グリッドエリアの幅 (colum)
- グリッドを分割(エリアを作る)
グリッドを分割してコンテンツを配置するエリアを作り、そこに名前をつける、というところが重要なポイントです。
.wrap {
display: grid;
grid-gap: 5px; // 間隔
grid-template-columns: repeat(12, 1fr); // repeat(すべてのグリッド(grid-template-areasで12分割するから12), 利用可能な空間の割合) => 各グリッドを等幅に
grid-template-rows: 10vh 70vh calc(20vh - 5px * 2); // row(行)の高さ => 画面に収まるように高さを調整
grid-template-areas:
"h h h h h h h h h h h h"
"s s m m m m m m m m m m"
"f f f f f f f f f f f f";
}
なんか不思議な記述がありますよね！
grid-template-area で必要なグリッドの数だけ、エリアの名前を明示します。
列(column)ごとに" "で区切って視覚的に分かりやすく記述できるのが特徴(素敵なー)です。
grid-template-columns にある記述はちょっとややこしいので、グリッドレイアウトの基本的な概念 - CSS | MDN を見てみると、fr の単位や、 repeat() 関数について理解が深まると思います。
グリッドアイテムへの指定
グリッドコンテナ直下の子要素はすべてグリッドアイテム要素に変わります。
header などのコンテンツに、表示したいエリアの名前を割り当てます。
.header {
// グリッドエリアの名前を割り当てる
grid-area: h;
}
.sidebar {
grid-area: s;
}
.main {
grid-area: m;
}
.footer {
grid-area: f;
}
するとこのレイアウトの完成です！
列(column) をまたがる指定
縦の列をまたがるようにレイアウトを指定するのも、視覚的に分かりやすく記述できるので簡単です。
例えば、SidebarをHeaderに食い込ませてみます。
.wrap {
// さっきの記述は省略してます
grid-template-areas:
"s s h h h h h h h h h h"
"s s m m m m m m m m m m"
"f f f f f f f f f f f f";
}
grid-template-areas に与えたパラメーターの見た目の通りになるのが、分かりやすくていいですよね。
実践的で柔軟にレスポンシブ化
レスポンシブなレイアウトを実現するように追記していきます。
余白も grid-template-areas で視覚的に表現できます。
.wrap {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 10vh 70vh calc(20vh - 5px * 2);
grid-template-areas:
"s s s s s s h h h h h h"
"m m m m m m m m m m m m"
"f f f f f f f f f f f f";
@media screen and (min-width: 768px) {
grid-template-areas:
"h h h h h h h h h h h h"
"s s m m m m m m m m m m"
"f f f f f f f f f f f f";
}
@media screen and (min-width: 980px) {
// 関係ない文字列でスペースを表現する
grid-template-areas:
"h h h h h h h h h h h h"
". s m m m m m m m m m ."
"f f f f f f f f f f f f";
}
}
というように、レスポンシブなレイアウトを簡単に実装できました。
成果物がこれ「CSS grid starter kit - JSFiddle」です。
おわり、そしてGridのはじまり
深い知識がなくても実現できる、実践的なレイアウトのCSS Gridの簡単な説明でした。
CSS Gridでできることは、もっと奥が深く多岐にわたるので、これで「なんか便利そう！」と思った方は
などを読んで、ともにGridの世界の理解を深めましょう！😇
CSS Grid はピクセルパーフェクトなデザインには少し向かないかもしれませんが、簡単なプロトタイプを組むときや、柔軟さが求められるダッシュボードや、インタラクティブなコンテンツを作る際に有用そうな印象を持っています。
また何か新しい知見や、おもしろいことを見つけたら投稿したいと思います。
おわります。