サクッとグリッドCSSを理解して、クライアントワークに使う
こんにちは。イッティのデザイナーのHです。IEを非対応の場合はCSSグリッドを積極的に使うことができます。
CSSグリッドは難しくはありません。グリッドの基本と、３つほどのプロパティを覚えれば使いこなすことができます。このページを読み終える頃にはCSSグリッドを使いこなす事ができているでしょう。
グリッドCSSは、グリッドの分割方法と新しい単位frを覚えることで、グリッドCSSを使いこなすことができます。
グリッドの指定方法がいくつかありますが、まずは基本的な指定方法を習得しましょう。
複雑なレイアウトも可能ですが、運用の効率化も考慮してシンプルなグリッドレイアウトにすることも重要になります。
まずはグリッド線の理解
まずはグリッド線の理解から。
Y軸は「row」
X軸は「column」
です。
グリッドを指定するプロパティ
グリッドを指定するプロパティや、値の記述方法はいくつか用意されていますが、まずはサンプルの３つを理解すればOKです。
サンプルの前提としてHTMLとCSSは下記になります。
HTML
<div class="oya"> <div class="blue-box">青いボックス</div> <div class="yellow-box">黄色いボックス</div> <div class="green-box">緑のボックス</div> <div class="pink-box">ピンクのボックス</div></div>CSS
.oya { display:grid; grid-template-rows:100px 100px 100px; grid-template-columns:200px 100px;}1.グリッド線で指定する方法
グリッド線で指定するベーシックな方法です。まずはこの方法を覚えて使いこなしましょう。
IE10でもベンダープレフィックスが用意されています。
CSS
.blue-box{ grid-column:1 / 2; grid-row:1 / 2;}下記のように記述することもできま。
CSS
.blue-box {
grid-column:1;
grid-row:1;
}2.グリッドエリアで指定する
始点と終点でグリッドを指定する方法で、Gridを理解する練習としては分かりやすい記述方法かと思います。IE11から対応しています。
CSSはショートハンドだと下記になります。
CSS
.blue-box { grid-area:1 / 1 / 2 / 2}※値とスラッシュは半角スペースが必要です。
ショートハンドを使わない場合は下記になります。
CSS
.blue-box { grid-column-start:1; grid-row-start:1; grid-column-end:2; grid-row-end:2;}3.グリッドエリアに名前を付けて指定する
グリッドエリアに名前をつけて、グリッドをレイアウトする方法です。
あらかじめ親要素のグリッドに名前を付けて、子要素にグリッド名を記述してはめ込んでいく感じです。
グリッドエリア名称のルール統一や、エリア名を考えることに困ることもあると思いますので「ヘッダー」「フッター」「サイドバー」などに使うのが良さそうです。
CSS
.oya {
display:gird;
grid-template-columns:200px 100px;
grid-template-rows: repeat(3,100px);
grid-template-areas:
"key-visual sidebar"
"news sidebar"
"footer footer";
}
.blue-box {
grid-area: key-visual;
}
.yellow-box {
grid-area:news;
}
.pink-box {
grid-area:sidebar;
}
.green-box {
grid-area:footer;
}「repeat」とは？
ここで「repeat(3,100px);」が出てきました。
repeatとは繰り返しのことで、サイズ100pxのアイテムを３つ繰り返すことになります。
repeatを使わない場合は
「grid-template-rows:100px 100px 100px;」となります。
マイナスの値で指定する方法
通常は、左上からグリッド線を数えてプロパティの値に指定しますが、右下からグリッド線を数えてプロパティの値に指定することもできます。
行（grid-row）が増えても、常に下に配置される「フッター」に使うと便利です。
値には「-（マイナス）」を付けて記述します。
CSS
.green-box { grid-column: -3 / -1;
grid-row: -1 / -2;}マイナス指定はあまり使いませんが、知識として知っているとイザという時に使えます。
frとは
frとはfraction（分数）のことで、グリッドで用意された新しい単位になります。
例えば下図のようにすると、自動でサイズ調整してくれます。
.oya { display:gird; grid-template-columns: 100px 100px 1fr;}frを使った比率割りもできます。
.oya { display:gird; grid-template-columns: 1fr 1fr 2fr;}repeatを使ったサイズの均等割りもできます。
.oya { display:gird; grid-template-columns: repeat(8,1fr);}重要なのは「frは親のサイズに合わせて、均等、比率でサイズ調整する」ということです。autoとは違います。
frとautoの違い
autoはグリッドのコンテンツに合わせてサイズ調整されます。
例えばautoを使うと、下図のようになります。
.oya { display:gird; grid-template-columns: repeat(3,1fr) auto;}サイズを指定とautoを組み合わせると下図のようになります。
frと同じことになります。
.oya {display:gird;grid-template-columns: repeat(2,100px) auto;}autoとautoを組み合わせると下図のようになります。
これもfrと同じことになります。
.oya {display:gird;grid-template-columns: repeat(2,auto) ;}グリッドの分割方法と、新しい単位frを使えることで、グリッドの基礎は身につきましたね。
アイテムの折り返し、サイズ調整
親要素のサイズに合わせて、アイテムの折り返し、サイズ調整を行う「auto-fill」と「auto-fit」を使うと、グリッドを使う幅が広がります。制作ではよく使うので覚えておきたいテクニックです。
auto-fill
空きエリアができると、アイテムと同じサイズの空グリッドが作られます。
auto-fit
空きエリアができないようにアイテムが伸縮されます。
auto-fill、auto-fitのデモを見ていただくと分かりやすいと思います。
デモのソースは下記になります。
html
<div class="grid_fill"><div class="item">item</div><div class="item">item</div><div class="item">item</div><div class="item">item</div></div><div class="grid_fit"><div class="item">item</div><div class="item">item</div><div class="item">item</div><div class="item">item</div></div>CSS
.grid_fill,.grid_fit{width: min(100%, 800px);margin: 50px auto;padding: 20px;border: 1px solid #ee8392;display: grid;grid-gap: 10px;}.grid_fill {grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));}.grid_fit {grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));}.item {height: 80px;border:1px solid #ccc;background-color: #fff;display:flex;justify-content: center;align-items: center;}auto-fill、auto-fitでレスポンシブデザインにも柔軟に対応できます。
サンプルでは「grid-gap」のプロパティが出てきました。
続いてgrid-gapについてご紹介します。
グリッド同士の間隔にはgrid-gap
グリッド同士の間隔は「grid-gap」を使います。
マージンはアイテムの上下左右に空間を作りますが、ギャップ（gap）は「溝」という考えです。つまりアイテム同士の上下左右に溝を作って間隔を開けるという事になります。
そのため「gird-gap」は親要素に指定します。
- grid-column-gap：列のマージンを指定できます。
- grid-row-gap：行のマージンを指定できます。
- grid-gap：列行のマージンを指定できます。
CSS
.test_grid { display:grid; grid-column-gap:10%; //列のマージン grid-row-gap:50px; //行のマージン grid-gap:100px; //列・行のマージン}ここまでCSS gridの基本的な指定方法、新しいサイズ、アイテムのサイズ調整・折り返し、間隔をご説明してきました。これだけで十分にGridを導入できる知識はついています。
CSS グリッドのジェネレーター
面倒なCSSグリッドを簡単に生成してくれるジェネレーターです。
かなり便利です。
CSS グリッドのチートシート
CSS グリッドをより理解するためのお薦めのチートシートをご紹介します。
下記の２つがお薦めです。
GRID
グリッドを作りながら見るとより理解できます。お薦めです。
CSS Grid Cheat Sheet
こちらもチートシートとなっていますが、プロパティを記入しながらグリッドを確認できます。
コレでグリッドを勉強するのではなく、一度グリッドを作った後に使ってみるとより理解することができます。
Grid テンプレート
Gridレイアウトのさまざまなテンプレートが用意されています。こちらもお薦めです。
基礎知識の参考になるグリッドレイアウト5選
CodepenからCSS Gridの基礎学習に最適な5つのレイアウトを紹介します。
お手本のようなグリッドレイアウトです。
こちらもオーソドックスなグリッドレイアウトです。「Naaah」の７番目のグリッド、8番目のグリッドにちょっとしたTipsが施されています。
斜めのグリッドはClip-pathによるもので、複雑なグリッドに見えますがオーソドックスなグリッドレイアウトです。
グリッドレイアウトを利用したメニューです。
オーソドックスなレイアウトですが、アニメーションでスタイリッシュ感を演出しています。
疑似要素（before、after）を使ってラインを描き、複雑なグリッドレイアウトに見えますがオーソドックスなレイアウトです。
ウェブサイトのレイアウト表現が広がりますね。
