サイトロゴ

Enjoy Creating
Web & Mobile Apps

MENU BOX
WEB
MOBILE
OPEN

ホーム

 > 

 > 

グリッドアイテム間の余白調整(gap)

グリッドアイテム間の余白調整(gap)

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

グリッドレイアウトでグリッド状に配置したアイテムは、何も設定しなければ余白がゼロでアイテム同士がくっついた状態になってしまいます。そこで今回は、グリッドアイテム間の余白を一括で設定できるCSSプロパティを紹介します!

– 目次 –

動画内容:グリッド間の幅設定について

グリッドレイアウトの基礎の記事では、グリッドアイテム間の隙間(余白)の調整をmarginプロパティを用いて行っていましたが、実はグリッドレイアウトではアイテム間の余白をまとめて調整できるCSSプロパティがちゃんと用意されています。▶グリッドレイアウトの基礎についてはこちら

「marginでもできるなら、それでいいじゃん!」と思われるかもしれませんが、marginプロパティで調整する場合、「グリッドアイテム同士のmargin-topとmargin-bottom、margin-rightとmargin-leftがそれぞれ影響し合うため、余白の計算が少し面倒になってしまいます。(下図参照)

グリッドレイアウトの余白説明

というわけで、アイテム間の幅が全て同じ幅で良い場合は、今回紹介する「row-gap」「columns-gap」といったグリッドレイアウト専用のCSSを使った方が早くて便利です。

グリッドレイアウトの幅を適切なものに調整して、より見やすいレイアウトを目指しましょう!


◆ グリッドアイテムの上下の幅を調整する ◆

グリッドアイテムの上下の幅…marginでいうと、margin-topとmargin-bottomに該当する幅ですが、その隙間を調整する時は(grid)row-gapというCSSを使います。

設定の仕方は簡単で、display:grid;を記載する親要素に、以下のように記載するだけです。

■セレクタ { row-gap: 数値 + 単位(pxや%など);}

widthの設定と違うのは、「基本的に値をキーワード値で設定することはない」という点です。
たとえば、grid-row: fit-content; などと記載しても何も起こりません。

また、全てのグリッドアイテム間の上下の幅がまとめて指定されるので、一部のアイテム間だけ調整するという使い方はできません。(一部のアイテムだけに余白を設定したい場合は、セレクタを該当のグリッドアイテムにした上でmarginプロパティを使うとできます。)

以上の注意点を踏まえた上で、サンプルコードと表示結果を見ていきましょう!

    <div class="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>

      .gridbox1 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        row-gap: 20px;
      }
      .gridbox1 div {
        background-color: lightgreen;
      }
      .gridbox1 div:nth-child(2n+1) {
        color: white;
        background-color: darkgreen;
      }

グリッド1
グリッド2
グリッド3
グリッド4
グリッド5
グリッド6
グリッド7
グリッド8
グリッド9

row-gapを設定したことで、グリッドアイテム間の上下の幅が空きました。しかし、左右の幅はまだ設定を入れていないので、グリッドアイテム同士が左右でくっついている状態になっていますね。
それでは次の章で、グリッドアイテム間の左右の幅をしていきましょう!

    POINT!
  1. ・グリッドアイテム間の上下の幅は、row-gapで調整できる!
  2. ・row-gapの値は数値+単位であり、キーワード値は基本的に取らない!

◆ グリッドアイテムの左右の幅を調整する ◆

row-gapでグリッドアイテム間の上下の幅を設定できましたが、アイテム間の左右の幅を設定するにはcolumn-gapプロパティを使用します。

row-gapとの違いは、上下の幅か左右の幅かというだけで、CSSの記載方法は同じです。
注意点も全く同じなので、さっそくサンプルコードと表示結果を見ていきましょう!先程、row-gapでアイテム間の上下の幅を空けたサンプルに「column-gap」を追加する形で紹介します。

    <div class="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>

      .gridbox1 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        row-gap: 20px;
        column-gap: 20px;
      }
      .gridbox1 div {
        background-color: lightgreen;
      }
      .gridbox1 div:nth-child(2n+1) {
        color: white;
        background-color: darkgreen;
      }

グリッド1
グリッド2
グリッド3
グリッド4
グリッド5
グリッド6
グリッド7
グリッド8
グリッド9

上下の幅に加え、左右の幅も空いたことにより、グリッドアイテム同士がくっつくことなくそれぞれ独立して見やすくなりました。
このように、グリッドレイアウトにする場合は基本的に、グリッドアイテム同士の間隔を空けるようにすると、見やすいレイアウトになります。

borderプロパティでグリッドアイテムに境界線を引いたとしても、間隔が空いていなければ窮屈な感じになってしまうので、気をつけてくださいね!

    POINT!
  1. ・グリッドアイテム間の左右の幅は、column-gapで調整できる!
  2. ・指定の仕方や注意点などは、row-gapもcolumn-gapも同じ!
  3. ・見やすいグリッドレイアウトにするには、上下左右の幅を適切に空けよう!

◆ gapとは? ◆

これまで、row-gapとcolumn-gapに分けて説明してきましたが、この2つのCSSプロパティは、「gap」というCSSで一括指定が可能です。

*gapの構文例*
■ セレクタ { gap: 10px 20px ; }

1つ目に書いた値が「row-gap」、2つ目に書いた値が「column-gap」になります。
上記の例でいうと、row-gap:10px; column-gap:20px; と書くのと同じになりますね。

ちなみに、値を1つしか書かなかった場合は、row-gapとcolumn-gapの両方にその値が適用されます。
row-gapだけを指定したい場合は、2つ目の値を書かないのではなく「0(ゼロ)」を記載する必要があります。逆にcolumn-gapだけを指定したい場合は、1つ目の値を「0」と記載すればOKです。

それでは上記を踏まえた上で、gapプロパティを使ったサンプルコードと表示結果を見てみましょう!

    <div class="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>

      .gridbox1 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px 10px;
      }
      .gridbox1 div {
        background-color: lightgreen;
      }
      .gridbox1 div:nth-child(2n+1) {
        color: white;
        background-color: darkgreen;
      }

グリッド1
グリッド2
グリッド3
グリッド4
グリッド5
グリッド6
グリッド7
グリッド8
グリッド9

gap: 20px 10px;としてみました。row-gap:20px; column-gap:10px; と同じなので、上下の幅の方が左右の幅に比べて少し大きく空いています。

今回のgapプロパティだけでなくmarginプロパティやborderプロパティなど、一括指定できるCSSプロパティは数多くありますが、できるだけ一括指定の方法に慣れておくことをおすすめします。

というのも、一括指定の方がCSSの行数が少なくて済むのでコードがスッキリして見やすくなりますし、CSSファイルも軽くなるからです。
CSSファイルはテキストなので、画像や動画ファイルと比べると容量は決して大きくないのですが、少しでもページを軽くして表示速度を速めるには無駄なCSSやJavaScriptのコードを減らすことも大切になります。
とは言え、もともと画像などをあまり配置していない軽いページに、CSSを該当のページだけ読み込ませるようにしている場合は、そこまで気にしなくても良いレベルではあります。

    POINT!
  1. ・gapプロパティで、row-gapとcolumn-gapの一括指定ができる!
  2. ・1つ目の値がrow-gap、2つ目の値がcolumn-gapになる!
  3. ・値を1つだけ書いた場合は、row-gapとcolumn-gapの両方に適用される!

◆ 複雑な配置を行うには? ◆

グリッドレイアウトは、要素を規則正しく並べるのが得意なCSSの機能ですが、例外的に一部分だけ少し移動させたり、変化を加えたりしたいということもあるでしょう。
そういった場合は、該当のグリッドアイテムにpositionプロパティや、marginプロパティを使うとうまくいきます。
以下、考えられるパターンとそのサンプルコードを紹介していきます。

パターン1:アイテムの一部を移動させたい
下の例では、アイテムにpositionプロパティを適用させています。

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

      .gridbox1 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px 10px;
      }
      .gridbox1 div {
        background-color: lightgreen;
      }
      .gridbox1 div:nth-child(2n+1) {
        color: white;
        background-color: darkgreen;
      }
      .changeitem {
        background-color: darkorange !important;
        position: relative;
        top: -5px;
        right: 12px;
      }

グリッド1
グリッド2
グリッド3
グリッド4
change me
グリッド6
グリッド7
グリッド8
グリッド9

パターン2:グリッドの並びは変えずに、アイテムの一部を少し大きくさせたい
下の例では、まずgapプロパティで全体的なアイテム間の幅を設定した後、該当アイテムのmarginプロパティに負の値を設定することで実現させています。

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

      .gridbox1 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px 10px;
      }
      .gridbox1 div {
        background-color: lightgreen;
      }
      .gridbox1 div:nth-child(2n+1) {
        color: white;
        background-color: darkgreen;
      }
      .changeitem {
        background-color: darkorange !important;
        margin: -10px -3px;
      }

グリッド1
グリッド2
グリッド3
グリッド4
change me
グリッド6
グリッド7
グリッド8
グリッド9

グリッドレイアウトの一部だけ変更を加えたいという場合は、例であげたようにアイテムに個別にCSSを設定することで調整可能であることが多いです。
とは言え、グリッドレイアウトの基本はあくまで「規則正しく格子状に並べること」です。
いくつもの要素が重なりあっていたり、高さも幅もバラバラだったり…という場合は、最初からpositionプロパティを使って配置した方が良いと思われます。

    POINT!
  1. ・グリッドアイテムに個別にCSSを設定することで、複雑な配置もできる!
  2. ・移動させたい場合はpositionプロパティを使うとうまくいく!
  3. ・グリッドレイアウトの配置を変えずに、アイテムの一部を大きくさせたい場合は、marginプロパティに負の値を設定する!
  4. ・グリッドレイアウトの基本は規則正しい配置なので、あまりに複雑な配置になるようなら違う方法の検討を!

ワンポイントチェック

今回、グリッドアイテム間の幅を調整できるCSSを紹介しましたが、ここで一つ疑問に思うことがありませんか?

「gapとmargin、両方設定したらどうなるの?」

結論から言うと、加算されます。


まずはgapだけを適用させたサンプルをご覧ください。(gap:10px;)

グリッド1
グリッド2
グリッド3
グリッド4
グリッド5
グリッド6
グリッド7
グリッド8
グリッド9

それでは次に、gapを適用させず、各アイテムにmarginを適用させた例です。(グリッドアイテムの全てにmargin:5px;)

グリッド1
グリッド2
グリッド3
グリッド4
グリッド5
グリッド6
グリッド7
グリッド8
グリッド9

そして本題。gapとmarginの両方を適用させた例です。(gap:10px; 全てのアイテムにmargin:5px;)

グリッド1
グリッド2
グリッド3
グリッド4
グリッド5
グリッド6
グリッド7
グリッド8
グリッド9

gapとmargin、どちらかのプロパティが優先されて片方しか効かないのであれば、最後の例も含めて全て同じ幅になっているはずですが、最後の例だけ間隔が広く空いていますね。

グリッドレイアウトの際に、「想定した以上にアイテム間の幅が空いちゃっているな?」という時は、gapだけでなく、グリッドアイテムにmargin設定がなされている可能性がある…ということを頭の片隅に置いておくと良いかもしれません。

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

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

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <style>
    .gridbox {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
    }
    .gridbox div {
      padding: 20px;
      background-color: lightblue;
    }
    .gridbox div:nth-child(2n+1) {
      color: white;
      background-color: darkblue;
    }
    .gridbox1 {
      row-gap: 20px;
    }
    .gridbox2 {
      column-gap: 20px;
    }
    .gridbox3 {
      gap: 20px 60px;
    }
    .bigitem {
      background-color: darkorange !important;
      margin: -10px -40px;
    }
  </style>
  <body>
    <hr style="margin:100px;">

    <!-- gapなし -->
    <div class="gridbox">
      <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>

    <hr style="margin:100px;">

    <!-- row-gapのみ -->
    <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>

    <hr style="margin:100px;">

    <!-- column-gapのみ -->
    <div class="gridbox gridbox2">
      <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>

    <hr style="margin:100px;">

    <!-- gap一括指定 -->
    <div class="gridbox gridbox3">
      <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>

    <hr style="margin:100px;">

    <!-- 一部のアイテムの間隔を狭くして大きく表示 -->
    <div class="gridbox gridbox3">
      <div>グリッド1</div>
      <div>グリッド2</div>
      <div>グリッド3</div>
      <div>グリッド4</div>
      <div class="bigitem">グリッド5</div>
      <div>グリッド6</div>
      <div>グリッド7</div>
      <div>グリッド8</div>
      <div>グリッド9</div>
    </div>

    <hr style="margin:100px;">

  </body>
</html>

« »

カテゴリーリンク

著者について- author profile -

ROYDOプロフィール写真
Michihiro

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

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

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

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

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

Twitterアイコン Instagramアイコン