前回初歩をご紹介したCSS Grid。
今回はもっといかにもグリッドレイアウト、という感じのことに挑戦したいと思います。

グリッド線の定義を知ろう

まずはグリッド線の定義を知りましょう。基本的にはy軸、x軸的な考え方です。
y軸＝row
x軸＝column

として定義していきます。


上の画像を見ると要素の区切りになるようなところに数字が振ってあるかと思います。
『column』『row』それぞれ振っている数字を使うことで、うまくレイアウトをしていくことができます。

定義を利用して実際の動きを確認してみよう

というわけで先ほどの定義を利用して、HTMLとCSS Gridで画像のような見た目を作ってみました。

See the Pen
Untitled by kkdd (@kk8kk)
on CodePen.

box01のcssを参考に説明していきます。


grid-row: 1 / 3;の表記について
これはrow（y軸）の数字を振った1～3番の領域を使用する、という感じの指定になります。
『/』を使用しているので見た目はややこしいのですが『～』で考えるとわかりやすいです。


grid-column: 1 / 2;も同じような扱いです。
column（x軸）の数字を振った1～2番の領域を使用する、という感じの指定になります。


他、box02とbox03を見るとわかりやすいのですが基本的に余白になっているような部分は特に何も指定しなくても隙間を埋めてくれます。
これで他のcssを使用したときは少し苦労する、y軸を隣の要素と合わせる、ということもだいぶ簡単に実現してくれます。

ショートハンドでの指定もできる

ちなみにショートハンドでの指定もできます。
下の図を参考に『grid-area』というプロパティを使用して指定します。

See the Pen
Untitled by kkdd (@kk8kk)
on CodePen.

またbox01のcssを参考に説明していきます。

始点と終点をrowとcolumnの順番で指定をします。
ちょっと最初は戸惑う指定の仕方な気もしますが慣れればコードを省略できます。

今回のポイント

グリッドレイアウトの基本的な内容を知ったところで今回はここまでで。
今日のポイントです。

• グリッド線は基本的にはy軸、x軸的な考え方。基本的な図は頭に入れておいた方が使いやすいかも。
• 『grid-row』『grid-column』を使って各ボックスの位置を指定できる。
• 『grid-area』でショートハンドでの指定もできる。

今度はもう少し応用的なこともご紹介できたらいいなあと思います。