MENU

グリッドを詰めて並べる

目次

グリッドの並び順を設定するためのgrid-auto-flowプロパティについて。

  • grid-auto-flow
  • grid-auto-column
  • dense

grid-auto-flow

・今まで要素は左上から右に並べられていったのですが、これは grid-auto-flow プロパティで操作できます。

・初期値は row で、今まで見たように左上から右に行ごとに並べられていく配置になっています

・もし左上から縦に列ごとで並べたい場合は、 grid-auto-flow プロパティ を column にします。例えば横並びになっているボックスを縦並びにする場合は親要素に対してgrid-auto-flow: column;と指定してあげればおkです。

grid-auto-column

次にボックスの要素を拡大してみます。例えばbox2とbox3に対して縦と横それぞれにspan 2を指定すると大きさが2倍になりそれに伴ってはいりきらないboxが溢れてしまいます

・grid の外の列に出た要素については横幅が伸びてしまうので幅を100pxにしたい場合は、grid-auto-columns: 100px;　というように設定します。

・これはdivは、なにも指定しなければグリッドの外では横方向いっぱいに広がってしまうので設定になっているからです。

dense

・空白ができてしまいそれを埋めたい場合は、denseという値をgrid-auto-flowに指定してあげるといいです。

・grid-auto-flow: column　dense;とするといいでしょう。

・大きさの異なる画像をきれいに並べたいときなどに便利です。

-広告-

 

 






JavaScript

この記事が気に入ったら
いいね または フォローしてね！

Follow Me
よかったらシェアしてね！
  • URLをコピーしました！

関連記事

目次