トップページ

このサイトについて

ゲーム

イラスト

プログラミング

動画

音楽

雑記

素材配布

ブログ

タグ：web

CSSにてdisplay: gridを設定するとグリッドデザイン（格子状にアイテムボックスが並ぶようなデザイン） が自動でいい感じになり便利だ。
CSSはこのようしてクラスgridをグリッドのコンテナとして使う：

    #grid {
      display: grid;
      grid-template-rows: 360px 360px 360px;
      grid-template-columns: repeat(auto-fill, 240px);
      grid-auto-rows: 360px;
    }
  

grid-template-rows: 360px 360px 360px;のようにgrid-template-rows/columnsに配列を設定すれば、 グリッドの反復数を設定できる。 ここでrowsが 横の列数とセルの縦幅に関する設定である。上の例では高さ360pxのセルを3つ並べることを意味する。 アイテムが多すぎてはみ出た場合はgrid-auto-rows: 360pxによって自動設定の大きさが設定され、 やはり高さ360pxのままになる。
同様の設定をcolumns（縦の行数・横幅）にもしてやればよい。折角なのでちょっと工夫をして repeatとauto-fillを使っている。これで「画面を埋めるまで繰り返す」、 つまり画面サイズに合わせて適当に折り返す、という動作になる。
HTML側ではこのようにして使う：

    

      

        item1
      
      

        item2
      
      
    
  

コンテナの中にduvを並べておけば自動でセルに入れ込んでくれる。

使用例

item1, 2, 3, ... がセルに入っている。