サイトロゴ

Enjoy Creating
Web & Mobile Apps

MENU BOX
WEB
MOBILE
OPEN

ホーム

 > 

 > 

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

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

この記事にはプロモーションが含まれています。

グリッドレイアウトのレスポンシブでは、ブレークポイントでカラム数を切り替えるCSSを入れても良いのですが、違う方法もあります。カラム数を何列と指定せずに、画面幅に合わせて自動で折り返されるようにする方法です。今回はその方法を紹介していきます！

– 目次 –
動画内容：グリッドアイテムの折り返し

グリッドレイアウトでは、grid-template-columnsの値を「１fr」など、画面の幅に合わせて伸び縮みする値にしていれば、スマホのような狭い横幅の画面でもはみ出すことはありません。ですが、「さすがにスマホで３カラム表示だと小さく表示されすぎて見にくいな・・・スマホでは１列か２列にしたいなぁ」というケースはよくあります。

こういったケースでの解決策は大きく分けて２つです。

１つはCSSのメディアクエリでスマホ表示になるブレークポイントを指定し、そこに、スマホ用のgrid-template-columnsの値を指定する方法。
簡単に言えば、以下のように書くということです。

＊PC用＊
セレクタ { grid-template-columns: 1fr 1fr 1fr; }

＊スマホ用＊
@media screen and (max-width:768px) {
セレクタ { grid-template-columns: 1fr 1fr; }
}

こうすることで、ブレークポイント（上記の例では768px）を境にカラム数が切り替わります。

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

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

◆ repeat関数でカラム数を設定する ◆

グリッドレイアウトの基礎の紹介記事では、grid-template-columnsの設定方法を以下のように紹介しました。

セレクタ { grid-template-columns: 1fr 1fr 1fr; }

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

repeat関数を使った指定について、ものすごく簡単に説明すると以下のようになります。

セレクタ { grid-template-columns: repeat( 何列にするかの指定 ,どれぐらいの幅にするかの指定 ）; }

なので、セレクタ { grid-template-columns: 1fr 1fr 1fr; } をrepeat関数を使って書き換えると、次のようになります。

セレクタ { grid-template-columns: repeat( 3 , 1fr); }

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

    <div class="gridbox1">
      <div>グリッド１</div>
      <div>グリッド２</div>
      <div>グリッド３</div>
      <div>グリッド４</div>
      <div>グリッド５</div>
      <div>グリッド６</div>
      <div>グリッド７</div>
      <div>グリッド８</div>
      <div>グリッド９</div>
    </div>

      .gridbox1 {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 10px;
      }
      .gridbox1 div {
        background-color: lightgreen;
      }
      .gridbox1 div:nth-child(2n+1) {
        color: white;
        background-color: darkgreen;
      }
グリッド１
グリッド２
グリッド３
グリッド４
グリッド５
グリッド６
グリッド７
グリッド８
グリッド９
    POINT!
  1. ・grid-template-columnsはrepeat関数を使って指定することもできる！
  2. ・repeat関数のカッコの中には、何列にするかの指定と、どれぐらいの幅にするかの指定を書く！

◆ minmax関数で最小と最大幅を設定する ◆

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

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

■セレクタ { grid-template-columns: minmax(500px,1fr) ; }

と記載すると、小さな画面のデバイスから見た時でも500pxの幅は確保され、500px以上の大きさで表示できるスペースがある時は画面幅に合わせて伸長します。
また、先ほど紹介したrepeat関数と組み合わせて以下のように指定することもできます。

■セレクタ { grid-template-columns: repeat( 3, minmax(100px,1fr) ) ; }

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

それでは、repeat関数とminmax関数を組み合わせたサンプルコードと表示結果を見てみましょう。バーを調整することにより、画面（親要素）幅を変更できる機能付きです。

    <div class="gridbox1">
      <div>グリッド１</div>
      <div>グリッド２</div>
      <div>グリッド３</div>
      <div>グリッド４</div>
      <div>グリッド５</div>
      <div>グリッド６</div>
      <div>グリッド７</div>
      <div>グリッド８</div>
      <div>グリッド９</div>
    </div>

      .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;
        }
      }
グリッド１
グリッド２
グリッド３
グリッド４
グリッド５
グリッド６
グリッド７
グリッド８
グリッド９

▲表示確認を行いやすくするため、PCでは３カラム、スマホ等では２カラムになるようにしています。幅を変えてみると、100px以上に表示できる時はアイテムが引き伸ばされ、縮む時は100px以下にはならないことが確認できますね。

文章が改行されずに表示できる幅を確保したい場合や、画像が縮小され過ぎてしまうのを防ぎつつ（minの幅指定）、逆に拡大されすぎるのを抑える（maxの幅指定）こともできます。
縮小され過ぎは困るが、拡大する分には画面幅に合わせて大きくなってくれたら良いという場合は、上記のサンプルコードのように、minmaxのmax値を「1fr」と指定すればOKです！

次の章では、いよいよグリッドアイテムの折り返しの設定をしていきましょう！

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

◆ グリッドアイテムの折り返し（auto-fill） ◆

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

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

■セレクタ { grid-template-columns: repeat( auto-fill, minmax(100px,1fr) ) ; }

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

それではサンプルコードと表示結果です。幅によって自動で折り返されるのが確認できないと意味がないので、親要素の幅を変えられる調整バーも付けてます。

    <div class="gridbox1">
      <div>グリッド１</div>
      <div>グリッド２</div>
      <div>グリッド３</div>
      <div class="sp_grid_brink">グリッド４</div>
      <div class="sp_grid_brink">グリッド５</div>
      <div class="sp_grid_brink">グリッド６</div>
    </div>

      .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ではなく、別のキーワード値を使う必要があります。

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

◆グリッドアイテムの折り返し（auto-fit） ◆

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

グリッドレイアウトのアイテムを幅に合わせて自動で折り返すという点では、auto-fillと同じですが、処理の方法が微妙に違います。
おさらいですが、auto-fillはアイテムが１つ以上入るスペースができる時は「空のグリッドアイテムを作り、埋める」という処理になります。結果的に、余白ができているように見えます。

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

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

先ほどauto-fillと設定したサンプルコード＆表示結果を、auto-fitに変えたものを用意しました。調節バーを動かして違いを確認してみて下さいね！ 

    <div class="gridbox1">
      <div>グリッド１</div>
      <div>グリッド２</div>
      <div>グリッド３</div>
      <div class="sp_grid_brink">グリッド４</div>
      <div class="sp_grid_brink">グリッド５</div>
      <div class="sp_grid_brink">グリッド６</div>
    </div>

      .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-fillとauto-fitの違いは特に「アイテムが１行で収まりきってしまう場合」に顕著です。

普通サイズのPCでは２行以上になるサイズでも、高解像度の大画面モニターで見ると１行に収まってしまう…というケースも考えられなくはありません。
特にBtoBの事業を行なっている企業のコーポレートサイトは、個人のスマホや自宅のPCではなく、会社が所有する大きな画面を持つPCから閲覧されることも多いと思われます。なので、グリッドレイアウトの折り返しを設定している場合は、大きな画面で見た時の見え方のチェックも大切です。

１行で収まってしまうと困る…という場合は、グリッドレイアウトの親要素となる幅を調整するか、そもそもグリッドレイアウトの自動折り返しの設定をせずに、明確にカラム数を定義するようにしましょう！

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

ワンポイントチェック

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

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

    <div class="gridbox1">
      <div class="griditem1">グリッド１</div>
      <div>グリッド２</div>
      <div>グリッド３</div>
      <div>グリッド４</div>
      <div>グリッド５</div>
      <div>グリッド６</div>
    </div>

      .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));
        }
      }
グリッド１
グリッド２
グリッド３
グリッド４
グリッド５
グリッド６

という感じで、フレックスボックスの折り返しでは表示が難しい折り返しを行う場合、グリッドレイアウトでの折り返しが役に立つこともあります。

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

今回の解説動画で使用したコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。（※スクロールできます）

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">

    <title></title>
  </head>
  <style>
    .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 {
      grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
    }
  </style>
  <body>

    <div class="gridbox gridbox1">
      <div>グリッド1</div>
      <div>グリッド2</div>
      <div>グリッド3</div>
      <div>グリッド4</div>
      <div>グリッド5</div>
      <div>グリッド6</div>
      <div>グリッド7</div>
      <div>グリッド8</div>
      <div>グリッド9</div>
    </div>

    <div class="gridbox gridbox2">
      <div>グリッド1</div>
      <div>グリッド2</div>
      <div>グリッド3</div>
    </div>


    <div class="gridbox gridbox3">
      <div>グリッド1</div>
      <div>グリッド2</div>
      <div>グリッド3</div>
    </div>



  </body>
</html>
記事のトップへ戻る
« »

カテゴリーリンク

著者について- author profile -

ROYDOプロフィール写真
Michihiro

モバイルアプリ（iOS・Android)ディベロッパー＆デザイナー

これまでに、可読性の高いカラーパターンを自動で生成するアプリや、『第３火曜日』といった形式で通知をスケジュールできるアプリなどを制作。

サブでWebデザイン・フロントエンドエンジニアとしても活動しています。

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

🎓資格：応用情報技術者/基本情報技術者/ウェブデザイン技能検定３級

Twitterアイコン Instagramアイコン