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

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

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

gridレイアウトのグリッドラインについて

グリッドレイアウトはこのようなグリッドラインで場所を指定できます。

grid-column、grid-rowでそれぞれの位置を指定します。
例えば、４のグリッドだったら、

grid-column:1;
grid-row:1;

といった感じです。このように簡単に位置を指定できて、なおかつ４の幅を５の位置まで伸ばす・・・と言うことも簡単にできるのです。

そういう範囲も指定しつつする方法はいくつかあるので見ていきましょう。

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
  
 
  

grid-column: 1 / 3

  
 
  

    
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
  

    

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
  

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

 
  

    
box_1
    
box_2
    
box_3
    
box_4
    
box_5
    
box_6
    
box_7
    
box_8
  
 

dense

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