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

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

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

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

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

 
  

    
box_1
    
box_2
    
box_3
    
box_4
    
box_5
    
box_6
    
box_7
    
box_8
    
box_9
    
box_10
  
    

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

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

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

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

グリッドサイズをfr指定

fr指定は、たとえば grid-template-columns: 1fr 2fr 3fr;と指定した場合、全体を１：２：３の幅で分割するといった意味となる。 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の数値)を使ってコンテンツがなくなっても余白を無くす

幅が個数を超えて余白が出ても、子要素が勝手に広がって余白をなくすようになります。

    
        .wrap2-4{
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(80px,1fr));
            border:2px solid #f00
        }
        
        .wrap2-4 > div{
            border:1px solid #000;
        }
        
  

    
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
  

表示