[css]display:grid;@gridレイアウトをざっくりまとめるーその1:基本ー

最終更新日:2021.10.01 [金] 公開日:2020.08.15 [土] カテゴリー:html・CSS・JS備忘

Pocket
Facebook にシェア
LINEで送る

直感的にわかりやすい、2次元レイアウトのグリッドレイアウト。

かなり奥が深くて、私自身まだかなり手探りなのですが、ちょっとずつ自分の学習のためにもまとめてみようと思います。



グリッドの仕組み:グリッドサイズを指定してグリッドを並べる

枠となる親要素にdisplay:grid;を指定することで、直下の要素がgrid配置できるようになります。
gridで配置の仕方は次のコードのコメントとそのあとの図を見てください。

grid-template-columnsとgrid-template-rowsはグリッド配置する子要素のサイズや並べ方を設定している。

つまり以下の図のような意味合い。


↓よって、このコードはそのまま書いたら、以下のようになる。

box_1:横幅80px縦100px
box_2:横幅80px縦100px
box_3:横幅80px縦100px
box_4:横幅80px縦100px
box_5:横幅80px縦100px
box_6:横幅80px縦100px
box_7:横幅80px縦100px
box_8:横幅80px縦100px
box_9:横幅80px縦100px
box_10:横幅80px縦100px

これらを踏まえて、色々なサイズ指定があるので、以下、まとめる。

グリッドサイズをfr指定

fr指定は、たとえば grid-template-columns: 1fr 2fr 3fr;と指定した場合、全体を1:2:3の幅で分割するといった意味となる。 grid-template-columns: 100px 1fr;とすると1つ目は100px幅にして、2つ目は残りの幅を全部と言う具合。
box_1
box_2
box_3
box_4
box_5
box_6
box_7
box_8
box_9
box_10

repeat():グリッドサイズを指定してrepaet()でグリッドを横に並べる

repeat(n個, px指定)で並べる

box_1
box_2
box_3
box_4
box_5
box_6
box_7
box_8
box_9
box_10

auto-fill:親要素に入るだけ並べるという意味

box_1
box_2
box_3
box_4
box_5
box_6
box_7
box_8
box_9
box_10

auto-fillとminmax(minの数値,maxの数値)を使って余白を無くす

box_1
box_2
box_3
box_4
box_5
box_6
box_7
box_8
box_9
box_10

auto-fitとminmax(minの数値,maxの数値)を使ってコンテンツがなくなっても余白を無くす

幅が個数を超えて余白が出ても、子要素が勝手に広がって余白をなくすようになります。
box_1
box_2
box_3
box_4
box_5
box_6
box_7
box_8
box_9
box_10

grid-auto-rowsを使って縦が何行になっても高さを指定するようにする

box_1
box_2
box_3
box_4
box_5
box_6
box_7
box_8
box_9
box_10

グリッドの寄せについて

ペンダープレフィックスは割愛しています。

justify-content:グリッド横方向の寄せ

start:左揃え
end:右揃え
center:真ん中揃え
space-between:両端は余白なしで、均等間隔にならべる
space-around:両端の余白も含んで、均等間隔にならべる

align-content:グリッド縦方向の寄せ

start:左揃え
end:右揃え
center:真ん中揃え
space-between:両端は余白なしで、均等間隔にならべる
space-around:両端の余白も含んで、均等間隔にならべる

justify-items:グリッドの中の要素の横方向寄せ
align-items:グリッドの中の要素の縦方向寄せ
justifty-self:グリッドの1つ1つに設定できる横方向の寄せ
align-self:グリッドの1つ1つに設定できる縦方向の寄せ

start:左(上)揃え
end:右(下)揃え
center:真ん中揃え
space-between:両端(上下)は余白なしで、均等間隔にならべる
space-around:両端(上下)の余白も含んで、均等間隔にならべる

DEMO

表示

box_1
box_2
box_3
box_4
box_5
box_6
box_7
box_8
box_9
box_10

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA