MENU

グリッドの数値を指定する設定をしよう

目次

グリッドを繰り返し生成したいときに使えるrepeat()について、グリッドを敷き詰めることができるauto-fillについて。

  • repeat()
  • auto-fill

repeat()

・グリットの数が多くなってしまった場合一つずつ大きさを設定していくのは大変なのでまとめて設定できるrepeat()を使って行きます。

・例えば10個のboxを作ってそれを3列4行で100pxを指定したい場合、12回100pxと書かなくてはいけなくなり面倒ですしcssも見にくくなってしまいます。

・その場合、grid-template-columnsの値をrepeat(4, 10px);としてあげて、grid-template-rowsの値をrepeat(4, 100px);としてあげれればその個数分書いた内容と同じ指定をすることができます。

・他の言語を使うことによってboxを指定の数だけ増やすことのできますのでそれと組み合わせると更にかなり便利に使うことのできます。

auto-fill

・列数を固定するのではなくて、親要素の幅に入る限りといった設定をすることもできます。

・このとき個数の代わりにauto-fillを使います。例えばboxの列をブラウザの幅分だけ入れたい場合 grid-template-columns: repeat(auto-fill, 100px);

というように書いていくことによって幅が伸びたらその分だけboxを入れていくという設定になります。

-広告-

 

 






JavaScript

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

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

関連記事

目次