グリッドアイテムの自動折り返し（auto-fill,auto-fit）

これでスッキリ解決できる場合も多いのですが、ブレイクポイントで切り替える方法には１つ問題があります。それは、 ブレイクポイントを設定した数だけしか、カラム数を変化させられない …という点です。実際、先ほどのメディアクエリで指定した例だと、「３カラムor２カラム」という２択にしかできません。どれだけ画面が大きなデバイスでも最大は３カラムですし、ものすごく小さな画面のデバイスから見ても１カラムにはなりません。

そこで解決策のもう１つの方法が、今回紹介する 「画面幅に合わせて、グリッドレイアウトのカラム（列）を自動的に増やしたり減らしたりする方法」です！

もちろんこれで何の問題もないのですが、グリッドレイアウトのカラムを自動的に増減させるにあたり、ちょっと違った設定の仕方が必要になるので、まずは repeat関数 を使った指定方法を紹介していきます。

何も難しいことはないですね。ただ、repeatの（）内に値を複数書く必要があるのですが、区切りの「,（カンマ）」を忘れないように気をつけましょう！一応、サンプルコードと表示結果を載せておきます。

グリッド１グリッド２グリッド３グリッド４グリッド５グリッド６グリッド７グリッド８グリッド９ .gridbox1 < display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; >.gridbox1 div < background-color: lightgreen; >.gridbox1 div:nth-child(2n+1)

・grid-template-columnsはrepeat関数を使って指定することもできる！
・repeat関数のカッコの中には、何列にするかの指定と、どれぐらいの幅にするかの指定を書く！

グリッドレイアウトでは先ほど紹介したrepeat関数の他に、 minmax関数 という独自の関数も使用することができます。

minmax()はその名前の通り、最小幅と最大幅を指定できる便利な関数で、最小幅と最大幅を ,（カンマ）で区切って記述します。たとえば、

このように記載すると、「３カラムにした上で、最小幅は100px、最大幅は画面幅に合わせて伸びるように」という意味になります。

グリッド１グリッド２グリッド３グリッド４グリッド５グリッド６グリッド７グリッド８グリッド９ .gridbox1 < width: 50%; display: grid; grid-template-columns: repeat(3, minmax(100px,1fr)); gap:20px; background-color:aliceblue; padding:10px; >.gridbox1 div < background-color: lightgreen; >.gridbox1 div:nth-child(2n+1) < color: white; background-color: darkgreen; >@media screen and (max-width:800px) < .gridbox1 < grid-template-columns: repeat(2, minmax(100px,1fr)) !important; >>

・minmax関数はグリッドレイアウトで使える独自の関数の１つで、最小・最大幅を同時に指定できる！
・repeat関数と合わせて指定することが可能！

グリッドレイアウトのrepeat関数とminmax関数が理解できたら、グリッドアイテムの折り返しの指定は簡単です。グリッドレイアウトのアイテムを折り返すということは、 カラムの数を数字で指定するのではなく、折り返しが行われるようなキーワード値で指定すれば良い ということです。

そのキーワード値の１つが 「auto-fill」です。 repeat関数などと合わせて次のように記述します。

実はこれでグリッドアイテムの自動折り返しの設定は完了です。例であげたCSSを言葉にすると、「グリッドアイテムの最小幅は100pxで、幅に合わせて拡大されるようにする。そして、カラムの数は幅に合わせて自動で折り返す。」ということになります。

グリッド１グリッド２グリッド３グリッド４グリッド５グリッド６ .gridbox1 < width: 50%; display: grid; grid-template-columns: repeat(auto-fill,minmax(100px,1fr)); gap:20px; padding: 10px; background-color: aliceblue; >.gridbox1 div < background-color: lightgreen; >.gridbox1 div:nth-child(2n+1) < color: white; background-color: darkgreen; >@media screen and (max-width:800px) < .gridbox1 < grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); >.sp_grid_brink < display: none; >>

▲幅を変えてみると、アイテムが自動で折り返されるのが確認できたかと思います。特に何列と指定せずに、「画面幅によってカラム数を柔軟に増減させたい」という場合に適しています。

grid-template-columns: repeat( auto-fill, minmax(100px, 1fr ) ); としているはずなのに、調節バーで親要素の幅を最大まで引き伸ばしても、グリッドアイテムが引き伸ばされていません。

これは、auto-fillは 「グリッドアイテムが１つ以上入るスペースができたら、新しく空のアイテムで埋める（余白があるように見えるようにする）」という設定 だからです。

・カラムの数を数字で指定するのではなく、「auto-fill」というキーワード値を指定することでアイテムの折り返しが指定できる！
・auto-fillは空のアイテムが作成され、それが埋められることで余白ができているように見える！

グリッドアイテムが1行でおさまる場合でもアイテムが引き伸ばされるようにするには、 auto-fit というキーワード値を使います。

一方、auto-fitは、 既存のアイテムを引き伸ばす という処理になります。

ただし、当然ですがminmax関数のmaxの値を１frなど、自動で引き伸ばされるような値にしていることが大前提です。maxをpxなどで固定していたら、それより引き伸ばされることはありません。

グリッド１グリッド２グリッド３グリッド４グリッド５グリッド６ .gridbox1 < width: 50%; display: grid; grid-template-columns: repeat(auto-fit,minmax(100px,1fr)); gap:20px; padding: 10px; background-color: aliceblue; >.gridbox1 div < background-color: lightgreen; >.gridbox1 div:nth-child(2n+1) < color: white; background-color: darkgreen; >@media screen and (max-width:800px) < .gridbox1 < grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); >.sp_grid_brink < display: none; >>

ご覧の通り、auto-fillとauto-fitの違いは特に 「アイテムが１行で収まりきってしまう場合」 に顕著です。

・auto-fitでは、既存のグリッドアイテムが引き伸ばされることによって、余白は生じない！（width等の設定にもよる）
・auto-fillとauto-fitの違いは、アイテムが１行で収まる場合に顕著！
・大きな画面では、折り返されない（１行で収まる）場合のことも考えて指定する！

ワンポイントチェック

今回はグリッドレイアウトのアイテムの折り返しについてでしたが、「折り返すなら、display:flex;でよくない？」と思わないこともないですよね？笑

ただ、grid-rowとかgrid-columnとか、グリッドレイアウトでなければ使えないCSSを使いつつ、折り返しを設定できるというメリットがあります。以下、グリッドアイテム１に grid-row: 1 / 3; grid-column: 1 / 3; を設定しつつ、折り返し設定をしたサンプルです。

グリッド１グリッド２グリッド３グリッド４グリッド５グリッド６ .gridbox1 < width: 50%; display: grid; grid-template-columns: repeat(auto-fit,minmax(100px,1fr)); gap:20px; padding: 10px; background-color: aliceblue; >.gridbox1 div < background-color: lightgreen; >.gridbox1 div:nth-child(2n+1) < color: white; background-color: darkgreen; >.griditem1 < grid-row: 1 / 3; grid-column: 1 / 3; >@media screen and (max-width:800px) < .gridbox1 < grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); >>

今回の動画で紹介したコード！

.gridbox < margin: 300px 0; display: grid; gap: 10px; >.gridbox div < padding: 20px; background-color: lightblue; >.gridbox div:nth-child(2n+1) < color: white; background-color: darkblue; >.gridbox1 < grid-template-columns: repeat(auto-fill,200px); >.gridbox2 < grid-template-columns: repeat(auto-fit,minmax(200px,300px)); >.gridbox3 グリッド1 グリッド2 グリッド3 グリッド4 グリッド5 グリッド6 グリッド7 グリッド8 グリッド9 グリッド1 グリッド2 グリッド3 グリッド1 グリッド2 グリッド3 カテゴリーリンク JavaScript MOBILE APP ALL CATEGORY 著者について - author profile - Michihiro モバイルアプリ（iOS・Android)ディベロッパー＆デザイナー

📝ツール・言語：JavaScript/React Native/Kotlin/Android Studio/Swift/SwiftUI

📎📎📎📎📎📎📎📎📎📎