サイトロゴ

Enjoy Creating
Web & Mobile Apps

MENU BOX
WEB
MOBILE
OPEN

ホーム

 > 

 > 

グリッドレイアウトの配置調整

グリッドレイアウトの配置調整

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

今回はグリッドレイアウトにしたものを中央に配置したり、右端に配置したりしたい場合のテクニックを紹介します、。フレックスボックスの場合と比べて、仕様や注意する点が異なる部分もあるので、しっかり確認していきましょう!

– 目次 –

動画内容:グリッドレイアウトの配置調整

フレックスボックスの配置調整は、justify-contentプロパティや、align-itemsプロパティで設定することができますが、同じようにグリッドレイアウトにもこういったプロパティを適用させることができます。(フレックスボックスの配置調整の記事は ▶︎こちら

フレックスボックスの時とほとんど同じ感覚で使えるのですが、grid-template-clumns(rows)など、グリッドレイアウトならではのCSSプロパティと組み合わせることになるので、注意が必要な場合もあります。

というわけで、justify-contentプロパティとalign-itemsプロパティの紹介は他の記事でもしているのですが、グリッドレイアウトではどうなるか改めて確認していきましょう!


◆ justify-contentで調整する ◆

グリッドレイアウトで配置したアイテムを中央や左端・右端などアイテム配置の横方向の調整を行いたい場合は、justify-contentプロパティを使用します。

セレクタは、グリッドアイテムの親要素(display:gird;を設定するセレクタと同じ)にして、以下のように記述します。

■セレクタ { justify-content: center; }

もちろん、値はcenter以外にも色々あるので表にまとめました。

*justify-contentのキーワード値と効果*

キーワード値効果
center中央に配置する
start先頭に寄せる
end末尾に寄せる
space-between等間隔に配置。先頭は先端に、末尾は末端に寄せる
space-around等間隔に配置。先頭の前と末尾の後の余白は、アイテム間の余白の半分
space-evenly等間隔に配置。先頭の前と末尾の後の余白も同じ

ここで注意なのですが、フレックスボックスの時の値はflex-start(end)だったのに対し、今回はstart(end)…となっています。

というのは、flex-start(end)は、フレックスボックスのアイテムにのみに適用されるものだからです。

…なのですが、flex-start(end)を指定したセレクタがフレックスボックスではない場合、start(end)のように適用されます。なので、結果としてはあまり気にし過ぎなくて良いということにはなるのですが、予備知識として知っておいて損はないと思います。

それでは、サンプルコードと、切り替わり機能付き表示結果を見ていきましょう!

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

      .gridbox1 {
        background-color: aliceblue;
        text-align: center;
        display: grid;
        grid-template-columns: repeat(2,minmax(50px,50px));
        grid-gap: 5px;
        justify-content: start;
        padding: 20px 0;
      }
      .gridbox1 div {
        background-color: lightgreen;
      }
      .gridbox1 div:nth-child(2n+1) {
        color: white;
        background-color: darkgreen;
      }

グリッド1
グリッド2
グリッド3
グリッド4
グリッド5
グリッド6

    POINT!
  1. ・グリッドレイアウトの横方向の配置調整は、フレックスボックスと同じようにjustify-contentを使う!
  2. ・基本的に、flex-start(end)ではなく、start(end)を使うと良い!

◆ align-itemsで調整する ◆

justify-contentと同様に、グリッドレイアウトではalign-itemsも適用させることができます。

先述のjustify-contentはアイテムの横方向の配置調整でしたが、align-itemsはアイテムの上端や下端、上下に対する中央など、アイテム配置の縦方向の調整を行いたい場合に使用します。

セレクタの指定はjustify-contentと同じで、グリッドアイテムの親要素に指定し、以下のように記述します。

■セレクタ { align-items: center; }

また、align-itemsの値には以下のようなものがあります。

*align-itemsのキーワード値と効果*

キーワード値効果
center中央に配置する
start上端に寄せる
end下端に寄せる
stretchグリッドの高さが揃うように引き伸ばす

そしてここで、justify-contentにはなかった注意点があります。grid-template-columnsプロパティはカラム(列)の数を決める上で設定が必須であり、その時にアイテムの横幅を同時に指定する事になるので「横幅の指定を忘れる」ということはまずありません。

しかし、アイテムの縦の幅は特に指定しなくてもグリッドレイアウトにすることは可能なので、grid-template-rowsの指定はcolumnsの指定と比べると忘れてしまいがちです。

align-itemsプロパティは、アイテムの高さの位置調整を行うプロパティなので、高さの定義がないとアイテムを上下に動かしようがない…ということになってしまいます。
align-itemsプロパティが効かない場合、そもそも高さが定義されているかどうかを確認してみると良いでしょう。

それでは、サンプルコードと切り替え機能付き表示結果です。

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

      .gridbox1 {
        background-color: aliceblue;
        text-align: center;
        display: grid;
        grid-template-columns: repeat(2,minmax(100px,120px));
        grid-template-rows: repeat(3,100px);
        grid-gap: 5px;
        justify-content:center;
        padding: 20px 0;
      }
      .gridbox1 div {
        background-color: lightgreen;
      }
      .gridbox1 div:nth-child(2n+1) {
        color: white;
        background-color: darkgreen;
      }

グリッド1
グリッド2
グリッド3
グリッド4
グリッド5
グリッド6

▲サンプルコードに、grid-template-rowsプロパティが追加されていることに注目です。これがないと高さの定義がされなくなり、上下の位置移動が起こらなくなってしまいます。

    POINT!
  1. ・グリッドアイテムの高さの調整は、align-itemsプロパティで行う!
  2. ・grid-template-rowsプロパティなどで、高さを定義しておくのを忘れずに!

◆ グリッドアイテムの位置を個別調整(justify-self) ◆

justify-contentプロパティと、align-itemsプロパティは、グリッドアイテムの位置を一括で調整するプロパティですが、アイテムの位置を個別に調整することもできます。

アイテムの位置を横方向に調整するには、justify-selfプロパティを使います。

セレクタはグリッドアイテムの親要素ではなく、グリッドアイテムそのものに指定し、以下のように記述します。

■セレクタ { justify-self: center ; }

justify-selfの値は基本的にjustify-contentやalign-itemsと同じなのですが、個別に設定するものなので、space-aroundなど「一括で複数のアイテムの位置を調整する値」はありません。

それではさっそく、サンプルコードと表示結果を確認して見ましょう。

    <div class="gridbox1">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div class="changegrid1">5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>

      .gridbox1 {
        background-color: aliceblue;
        text-align: center;
        display: grid;
        grid-template-columns: repeat(3,minmax(60px,300px));
        grid-gap: 30px;
        justify-content:center;
        padding: 20px 0;
      }
      .gridbox1 div {
        background-color: lightgreen;
      }
      .gridbox1 div:nth-child(2n+1) {
        color: white;
        background-color: darkgreen;
      }
      .changegrid1 {
        background-color: darkorange !important;
        justify-self: start;
      }

7
8
9

▲注意点としては、grid-template-columnsでminmax値を指定していても、justify-selfを指定しているアイテムには無効になってしまいます。(他のアイテムと同様に幅が決められてしまったら、横に動かしようがなくなってしまうからです)

他のアイテムと幅を合わせた上で、位置を移動させたい場合はpositionプロパティなどを使うと良いでしょう。

    POINT!
  1. ・グリッドレイアウトのアイテムの個別の位置調整(横移動)は、justify-selfプロパティを使う!
  2. ・justify-selfが適用されているアイテムには、grid-template-columnsで指定した幅が無効になるので注意!

◆ グリッドアイテムの位置を個別調整(align-self) ◆

グリッドアイテムの縦方向の個別の位置調整は、align-selfプロパティ を使います。

セレクタはjustify-selfと同じようにグリッドアイテムに指定し、以下のように記述します。

■セレクタ { align-self: center ; }

align-selfプロパティの値は、align-itemsと同じと思ってもらって大丈夫です。
ということで、毎度のことながらサンプルコードと表示結果を確認してイメージを具体化させていきましょう!

    <div class="gridbox1">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div class="changegrid1">5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>

      .gridbox1 {
        background-color: aliceblue;
        display: grid;
        grid-template-columns: repeat(3,minmax(60px,300px));
        grid-template-rows: repeat(3,100px);
        grid-gap: 30px;
        justify-content: start;
        align-items: end;
        padding: 20px 0;
      }
      .gridbox1 div {
        background-color: lightgreen;
      }
      .gridbox1 div:nth-child(2n+1) {
        color: white;
        background-color: darkgreen;
      }
      .changegrid1 {
        background-color: darkorange !important;
        align-self: start;
      }

7
8
9

align-selfで上下の配置調整を行えることが確認できました。ただ、上揃えとか下揃えとか、ある一定のラインに揃えたいわけではなく、任意の位置に移動させたいということであれば、 positionプロパティを使った移動で調整した方がスムーズな場合もあります。

justify-self・align-selfを使えば、少なくとも枠からはみ出たり大きく配置がズレてしまうことがないというメリットがある一方、細かい位置調整は苦手です。positionプロパティはその反対という感じなので、状況に応じてどのCSSプロパティを使うべきか判断する。…ということが重要です。

    POINT!
  1. ・グリッドレイアウトのアイテムの個別の位置調整(縦移動)は、align-selfプロパティを使う!
  2. ・基本的な使い方は、justify-selfと同じ!
  3. ・位置の微調整が必要な場合は、positionプロパティなど他のCSSの使用の検討が有効なことも!

ワンポイントチェック

今回はグリッドレイアウトの配置調整の方法を紹介しましたが、ここでまた一つ、細かい仕様の説明を加えたいと思います。
justify-content: space〜 では、アイテムが等間隔に並べらます。…つまり、「gapプロパティを設定せずとも横方向の間隔が空く」ということになるわけです。

この時、「gapプロパティを設定していたらどうなるか?」というのが今回の議題というか実験です。

結論を先に言っちゃうと、等間隔に並べられた上で、gapプロパティで設定した間隔の影響が出るということになるのですが、サンプルコードと表示結果をそれぞれ見ていきましょう!

まずは、justify-content:space-evenly;の設定ありで、gapの設定なしの場合です。

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

      .gridbox1 {
        display: grid;
        grid-template-columns: repeat(2,100px);
        justify-content: space-evenly;
        padding: 10px;
        background-color: aliceblue;
      }
      .gridbox1 div {
        background-color: lightgreen;
      }
      .gridbox1 div:nth-child(2n+1) {
        color: white;
        background-color: darkgreen;
      }
グリッド1
グリッド2
グリッド3
グリッド4

row-gapも含めてgapやmarginは設定していないので、上下の間は空かずにくっついてしまっています。

それでは次に、justify-content:space-evenly;あり、gapありの場合です。

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

      .gridbox1 {
        display: grid;
        grid-template-columns: repeat(2,100px);
        gap: 20px;
        justify-content: space-evenly;
        padding: 10px;
        background-color: aliceblue;
      }
      .gridbox1 div {
        background-color: lightgreen;
      }
      .gridbox1 div:nth-child(2n+1) {
        color: white;
        background-color: darkgreen;
      }
グリッド1
グリッド2
グリッド3
グリッド4

アイテム同士(横方向)の間隔がより空いたのが分かります。より分かりやすいよう、表示結果を続けて並べてみましょう。

グリッド1
グリッド2
グリッド3
グリッド4
グリッド1
グリッド2
グリッド3
グリッド4

というわけで、同じ「justify-contentの値を設定していても、gapプロパティの設定の有無によって見え方が変わってしまう」という点には注意が必要です。

gap(column-gap)の値を計算に含めた上でjustify-contentプロパティで等間隔の配置調整をするのはちょっと面倒なので、row-gapのみ設定するなどの方法を取るのも良いかもしれません。

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

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

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
    .height {
      height: 100px;
    }
      .gridbox {
        padding: 40px;
        background-color: aliceblue;
        display:grid;
        grid-template-columns: repeat(3,150px);
        grid-template-rows: repeat(2, 200px);
      }
      .griditem {
        background-color: lightblue;
      }
      .griditem:nth-child(2n+1) {
        color: white;
        background-color: darkblue;
      }
      .gridbox1 {
        justify-content: center;
      }
      .gridbox2 {
        justify-content: space-around;
      }
      .gridbox3 {
        justify-content: space-evenly;
      }
      .gridbox4 {
        align-items: center;
      }
      .gridbox5 {
        align-items: end;
      }
    </style>
  </head>
  <body>
    <div class="height"></div>

    <div class="gridbox gridbox1">
      <div class="griditem">1</div>
      <div class="griditem">2</div>
      <div class="griditem">3</div>
      <div class="griditem">4</div>
      <div class="griditem">5</div>
      <div class="griditem">6</div>
    </div>

    <div class="height"></div>

    <div class="gridbox gridbox2">
      <div class="griditem">1</div>
      <div class="griditem">2</div>
      <div class="griditem">3</div>
      <div class="griditem">4</div>
      <div class="griditem">5</div>
      <div class="griditem">6</div>
    </div>

    <div class="height"></div>

    <div class="gridbox gridbox3">
      <div class="griditem">1</div>
      <div class="griditem">2</div>
      <div class="griditem">3</div>
      <div class="griditem">4</div>
      <div class="griditem">5</div>
      <div class="griditem">6</div>
    </div>

    <div class="height"></div>

    <div class="gridbox gridbox4">
      <div class="griditem">1</div>
      <div class="griditem">2</div>
      <div class="griditem">3</div>
      <div class="griditem">4</div>
      <div class="griditem">5</div>
      <div class="griditem">6</div>
    </div>

    <div class="height"></div>

    <div class="gridbox gridbox5">
      <div class="griditem">1</div>
      <div class="griditem">2</div>
      <div class="griditem">3</div>
      <div class="griditem">4</div>
      <div class="griditem">5</div>
      <div class="griditem">6</div>
    </div>

    <div class="height"></div>

  </body>
</html>

« »

カテゴリーリンク

著者について- author profile -

ROYDOプロフィール写真
Michihiro

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

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

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

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

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

Twitterアイコン Instagramアイコン