CSS Grid Layout 入門 基本

Bootstrap4でレイアウトを勉強してるが、昨年からCSS Grid Layoutなる言葉をよく聞く。
いずれにしても実装してみないと使い勝手がよくわからないので、さっそく作ってみる。

早速記述

通常のよくあるレイアウトを作る。
次にHTML側

つぎに分かりやすいように色を付ける。

 

.container をグリッドコンテナに設定

この状態で確認すると、

実際のブラウザでの見え方 index01.html

グリッドトラックの幅と数を設定

まずはわからないので、調べると、

グリッドコンテナ

CSSグリッドレイアウトを使用するには必ず必要。
要素に対してdisplay: griddisplay: inline-gridを指定することでグリッドコンテナー設定。

グリッドアイテム

グリッドコンテナ内部に入る子要素のこと。グリッド上に配置される要素。

グリッドライン

グリッドを分ける垂直および水平の線のこと。上下左右それぞれの両端にも存在し、上あるいは左から1から順に正の番号が振られる……お、おう。

グリッドトラック

行や列のグリッドラインの間に挟まれた空間のこと。行を指定するgrid-template-columns および列を指定する grid-template-rows で行と列の間隔を指定……お、おう。

グリッドラインとグリッドトラックが理解できないぜ。まずはやってみるか。テストで150pxで設定してみる。

 

実際のブラウザの見え方 index02.html

ようは高さや幅を決めてるのか。

ん?では、150PXを3つ並べると・・・?

ブラウザでの見え方 index03.html

つまり、グリッドコンテナで行を列を150px 150px……と決めるのか。
続けて目的のレイアウトにしてみる。

で、このgrid-column-start: 1; grid-column-end: 3;だが、1から3までということで、目には見えない線までということ。図にすると……

なるほど。

で、さらに、

で、完成したのがこちら、
http://kato.space/demo/css_grid_layout/index04.html

なるほど。分かってしまえばなんてことない。
ただ、グリッドトラックがわからないので、再度見直し。
これはグリッドアイテムの高さ・幅のこと。

https://cssgridgarden.com/#ja で確認練習。

例:
grid-column-end:-1
グリッドの線を左ではなく右から数えたくなった時は、
grid-column-start と grid-column-end に負の値を設定できます。たとえば、-1 にセットすれば、右端から数えて1番目のグリッドラインを指定できます。
スパンgrid-column-end:span5;とか

じゃレスポンシブはどうすんだ?

ここまで把握した。じゃ、ユーザー側のブラウザ幅のレスポンシブはどうするんだと思うので、再度調べる。2カラムで2:1なら、2fr 1fr とか分かったが……調べるとメディアクエリを使う方法で対応している模様。

さっそく、次はこれを触ってみよう。

メモ:

 

 

 

Follow me!

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA