大阪府堺市のWEB制作(ホームページ制作)事務所です

[css]display:grid;@gridレイアウトーその2ー

最終更新日:2022.05.23 [月] 公開日:2020.08.19 [水] カテゴリー:html・CSS・jQuery・JS備忘

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

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



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_1
box_2
box_3
box_4
box_5
box_6
box_7
box_8
box_1
box_2
box_3
box_4
box_5
box_6
box_7
box_8

grid-column: 1 / 3

  
 
  
box_1
box_2
box_3
box_4
box_5
box_6
box_7
box_8
box_1
box_2
box_3
box_4
box_5
box_6
box_7
box_8

grid-column: 1 / -1

     
  
box_1
box_2
box_3
box_4
box_5
box_6
box_7
box_8
box_1
box_2
box_3
box_4
box_5
box_6
box_7
box_8

grid-column: 1 / span 2

    
    
     
  
box_1
box_2
box_3
box_4
box_5
box_6
box_7
box_8
box_1
box_2
box_3
box_4
box_5
box_6
box_7
box_8

名前をグリッドラインにつけて配置する

        
  
box_1
box_2
box_3
box_4
box_5
box_6
box_7
box_8
box_1
box_2
box_3
box_4
box_5
box_6
box_7
box_8

grid-auto-flow:グリッドの並び順を操作する

 
  
box_1
box_2
box_3
box_4
box_5
box_6
box_7
box_8
box_1
box_2
box_3
box_4
box_5
box_6
box_7
box_8

dense

空白ができた場所に埋め込んでいくように配置される。

スポンサーリンク

コメントを残す