完成物
See the Pen grid-layout by ririli (@ririli) on CodePen.
何がしたかったのか
codepenを見ていただければわかる通り、1番の枠と4番の枠が左下で被ってます。
これがやりたかった。
ケースとしては4番の枠は実際には真ん中の分しか描画するものはないけど全体に対してセンタリングしたい、かつ1番の枠のbottomと高さを合わせたいというものです。
grid-layoutの指定方法
CSSでdisplayの値にgridと指定することで利用できる要素の配置方式です。
大きな箱を用意して縦と横に分割し、子要素を分割したうちのどこに配置するかを指定していくことになります。
CodePenで実装しているものでいくと、grid-containerクラスを付与したdiv要素がgridを持つ大きな箱で、その中にidを付与した4つの子要素を配置してます。
分割のサイズは以下で指定。
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
frというのはgrid-layoutで利用する単位で、幅を均等に分割するために使います。
この場合横に3マス、縦に2マスで計6マス均等な幅で作られてます。
続いて、子要素の指定について。
# grid-box-1 {
border: solid 5px red;
grid-row: 1/3;
grid-column: 1/2;
}
1番の枠のcssを抜粋しました。
ここで注意なのが、grid-rowとgrid-columnに指定する数字です。
直感的には3分の1と2分の1に見えますが、実はそうではなく線を指定しています。
grid-rowで言えば、「1本目の線から3本目の線まで使う」という指定です。
今回はrow方向には2マス作ってあるので線は3本あります。
そんな中で1本目から3本目ということは縦全て、ということですね。
grid-columnも同様に「1本目の線から2本目の線まで使う」という指定になります。
これによって6マスあるうちの左側2つを使う指定を実現しています。
そして、実はこの指定は他の要素と重複することができます。
以下は4番の子要素の指定ですが、grid-columnが1/4ということは1番の枠が使っている1本目から2本目の領域を含んでいます。
# grid-box-4 {
border: solid 5px black;
grid-row: 2/3;
grid-column: 1/4;
text-align: center;
}
こうして「4番の枠は実際には真ん中の分しか描画するものはないけど全体に対してセンタリングしたい、かつ1番の枠のbottomと高さを合わせたい」という要望を実減できました。