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

[css]display:grid;@gridレイアウトをざっくりまとめるーその1:基本ー

最終更新日: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はグリッド配置する子要素のサイズや並べ方を設定している。

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


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

box_1:横幅80px縦100px
box_2:横幅80px縦100px
box_3:横幅80px縦100px
box_4:横幅80px縦100px
box_5:横幅80px縦100px
box_6:横幅80px縦100px
box_7:横幅80px縦100px
box_8:横幅80px縦100px
box_9:横幅80px縦100px
box_10:横幅80px縦100px

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

グリッドサイズをfr指定

fr指定は、たとえば grid-template-columns: 1fr 2fr 3fr;と指定した場合、全体を1:2:3の幅で分割するといった意味となる。 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
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
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
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
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
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
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

表示

box_1
box_2
box_3
box_4
box_5
box_6
box_7
box_8
box_9
box_10

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA