[css]display:grid;@gridレイアウトーその2ー
最終更新日:2022.05.23 [月] 公開日:2020.08.19 [水] カテゴリー:html・CSS・jQuery・JS備忘
直感的にわかりやすい、2次元レイアウトのグリッドレイアウト。
かなり奥が深くて、私自身まだかなり手探りなのですが、ちょっとずつ自分の学習のためにもまとめてみようと思います。
Contents
gridレイアウトのグリッドラインについて

グリッドレイアウトはこのようなグリッドラインで場所を指定できます。
grid-column、grid-rowでそれぞれの位置を指定します。
例えば、4のグリッドだったら、
grid-column:1;
grid-row:1;
といった感じです。このように簡単に位置を指定できて、なおかつ4の幅を5の位置まで伸ばす・・・と言うことも簡単にできるのです。
そういう範囲も指定しつつする方法はいくつかあるので見ていきましょう。
grid-rowとgrid-columnで範囲を指定
grid-column: 2 / 3 略してgrid-column: 2;
box_1box_2box_3box_4box_5box_6box_7box_8
box_1
box_2
box_3
box_4
box_5
box_6
box_7
box_8
grid-column: 1 / 3
box_1box_2box_3box_4box_5box_6box_7box_8
box_1
box_2
box_3
box_4
box_5
box_6
box_7
box_8
grid-column: 1 / -1
box_1box_2box_3box_4box_5box_6box_7box_8
box_1
box_2
box_3
box_4
box_5
box_6
box_7
box_8
grid-column: 1 / span 2
box_1box_2box_3box_4box_5box_6box_7box_8
box_1
box_2
box_3
box_4
box_5
box_6
box_7
box_8
名前をグリッドラインにつけて配置する
box_1box_2box_3box_4box_5box_6box_7box_8
box_1
box_2
box_3
box_4
box_5
box_6
box_7
box_8
grid-auto-flow:グリッドの並び順を操作する
box_1box_2box_3box_4box_5box_6box_7box_8
box_1
box_2
box_3
box_4
box_5
box_6
box_7
box_8
コメントを残す
コメントを投稿するにはログインしてください。