[css]display:grid;@gridレイアウトーその2ー
最終更新日:2021.10.01 [金] 公開日:2020.08.19 [水] カテゴリー:html・CSS・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;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<style> .wrap1{ display: grid; grid-template-columns: 80px 80px 80px; grid-template-rows: 80px 80px 80px; border:2px solid #f00 } .wrap1 > div{ border:1px solid #000; } .wrap1 .box_1{ color: #f00; border:1px solid #f00; background-color: rgba(245,5,9,0.12); grid-column: 2 / 3; /*最初の図の線の位置を指定 省略して2だけでも良い*/ grid-row: 3 / 4; /*最初の図の線の位置を指定 省略して3だけでも良い*/ } </style> <div class="wrap1"> <div class="box_1">box_1</div> <div class="box_2">box_2</div> <div class="box_3">box_3</div> <div class="box_4">box_4</div> <div class="box_5">box_5</div> <div class="box_6">box_6</div> <div class="box_7">box_7</div> <div class="box_8">box_8</div> </div> |
box_1
box_2
box_3
box_4
box_5
box_6
box_7
box_8
grid-column: 1 / 3
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<style> .wrap2{ display: grid; grid-template-columns: 80px 80px 80px; grid-template-rows: 80px 80px 80px; border:2px solid #f00 } .wrap2 > div{ border:1px solid #000; } .wrap2 .box_1{ color: #f00; border:1px solid #f00; background-color: rgba(245,5,9,0.12); grid-column: 1 / 3; /*線の位置で、範囲を指定:この場合は1から3まで*/ grid-row: 2; } </style> <div class="wrap2"> <div class="box_1">box_1</div> <div class="box_2">box_2</div> <div class="box_3">box_3</div> <div class="box_4">box_4</div> <div class="box_5">box_5</div> <div class="box_6">box_6</div> <div class="box_7">box_7</div> <div class="box_8">box_8</div> </div> |
box_1
box_2
box_3
box_4
box_5
box_6
box_7
box_8
grid-column: 1 / -1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<style> .wrap3{ display: grid; grid-template-columns: 80px 80px 80px; grid-template-rows: 80px 80px 80px; border:2px solid #f00 } .wrap3 > div{ border:1px solid #000; } .wrap3 .box_1{ color: #f00; border:1px solid #f00; background-color: rgba(245,5,9,0.12); grid-column: 1 / -1; /*線の位置で、範囲を指定:この場合は1から-1まで*/ grid-row: 2; } </style> <div class="wrap3"> <div class="box_1">box_1</div> <div class="box_2">box_2</div> <div class="box_3">box_3</div> <div class="box_4">box_4</div> <div class="box_5">box_5</div> <div class="box_6">box_6</div> <div class="box_7">box_7</div> <div class="box_8">box_8</div> </div> |
box_1
box_2
box_3
box_4
box_5
box_6
box_7
box_8
grid-column: 1 / span 2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<style> .wrap4{ display: grid; grid-template-columns: 80px 80px 80px; grid-template-rows: 80px 80px 80px; border:2px solid #f00 } .wrap4 > div{ border:1px solid #000; } .wrap4 .box_1{ color: #f00; border:1px solid #f00; background-color: rgba(245,5,9,0.12); grid-column: 1 / span 2; /*線の位置で、範囲を指定:この場合は1から3まで*/ grid-row: 2; } </style> <div class="wrap4"> <div class="box_1">box_1</div> <div class="box_2">box_2</div> <div class="box_3">box_3</div> <div class="box_4">box_4</div> <div class="box_5">box_5</div> <div class="box_6">box_6</div> <div class="box_7">box_7</div> <div class="box_8">box_8</div> </div> |
box_1
box_2
box_3
box_4
box_5
box_6
box_7
box_8
名前をグリッドラインにつけて配置する
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<style> .wrap5{ display: grid; grid-template-columns: [grid-c1] 80px [grid-c2] 80px [grid-c3] 80px [grid-c4]; grid-template-rows:[grid-r1] 80px [grid-r2] 80px [grid-r3] 80px [grid-r4] ; border:2px solid #f00 } .wrap5 > div{ border:1px solid #000; } .wrap5 .box_1{ color: #f00; border:1px solid #f00; background-color: rgba(245,5,9,0.12); grid-column: grid-c2 / grid-c3; grid-row: grid-r2 / grid-r4; } </style> <div class="wrap5"> <div class="box_1">box_1</div> <div class="box_2">box_2</div> <div class="box_3">box_3</div> <div class="box_4">box_4</div> <div class="box_5">box_5</div> <div class="box_6">box_6</div> <div class="box_7">box_7</div> <div class="box_8">box_8</div> </div> |
box_1
box_2
box_3
box_4
box_5
box_6
box_7
box_8
grid-auto-flow:グリッドの並び順を操作する
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<style> .wrap6{ display: grid; grid-auto-flow: column;/*初期値はrow*/ grid-template-columns: 80px 80px 80px; grid-template-rows: 80px 80px 80px; border:2px solid #f00; } .wrap6 > div{ border:1px solid #000; } </style> <div class="wrap6"> <div class="box_1">box_1</div> <div class="box_2">box_2</div> <div class="box_3">box_3</div> <div class="box_4">box_4</div> <div class="box_5">box_5</div> <div class="box_6">box_6</div> <div class="box_7">box_7</div> <div class="box_8">box_8</div> </div> |
box_1
box_2
box_3
box_4
box_5
box_6
box_7
box_8
コメントを残す