サイトロゴ

Enjoy Creating
Web & Mobile Apps

MENU BOX
WEB
MOBILE
OPEN

ホーム

 > 

 > 

要素のグリッド配置 ※基礎編

要素のグリッド配置 ※基礎編

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

例えばフォトギャラリーなど、縦にも横にも規則正しく写真を並べたい場合、要素をグリッド(格子状)のように配置する必要があります。このようなケースでは、フレックスボックスよりもグリッドレイアウトの方が適しているので、今回はそのグリッドレイアウトの基礎を紹介します!

– 目次 –

動画内容:グリッドレイアウトについて

要素をただ単に横並びにするだけであれば、display:flex;で横並びにするのが一番楽ですし、その後の配置調整もしやすいです。(要素の横並びについての記事は▶︎こちら
では、田んぼの「田」の字のように横並びというよりは格子状・方眼状にしたいという場合はどうでしょうか?具体的には下のようなイメージです。

要素1要素2要素3
要素4要素5要素6
要素7要素8要素9

こういった場合でも、もちろんdisplay:flex;で配置することは可能です。ただし、display:flex;でやろうと思うと、けっこう面倒くさいです。
display:flex;で格子状にキレイに並べようと思ったら、フレックスボックスの幅に合わせて余白を計算に含めた上でフレックスアイテムの幅を指定し、さらにフレックスアイテムの折り返しを指定しなければなりません。
また、後になって列を増やしたいとなった時など、レイアウトに何か変更が出るたびにフレックスアイテムの幅や余白をそれぞれ設定し直す必要があります。

…とは言え、ここまでであれば別にフレックスボックスでもなんとかやれそうな気がしてしまいます。
では、さらに「要素の一部だけ広く幅を取りたい」という場合はどうでしょうか?具体的は以下のような感じです。

要素1要素2要素3
要素4要素5

これをフレックスボックスでやろうと思ったら、
1)要素1を用意
2)要素2〜5をフレックスボックスでレイアウト
3)要素1と要素2〜5をさらにフレックスボックスでレイアウト

といった手順になってしまいます。なんというかこれはもう、すごく面倒くさいですよね。笑

そこで、今回はこういった規則正しいグリッド状のレイアウトが得意なCSSを紹介していきます!
ただフレックスボックスもそうですが、グリッドレイアウトも奥が深くて一度に説明すると混乱しちゃうので(僕が)、今回は基礎に絞って説明していきます。


◆ display:grid、grid-template-columnsとは ◆

display:grid(ディスプレイ:グリッド)とは、要素をグリッドレイアウトにする指定です。gridは、displayプロパティの値の1つです。

display:flex;と同じように、グリッド状に配置したいアイテムそのものではなく、親要素に設定します。ただ、display:flex;とは決定的に異なる点があります。それが、

display:grid;としただけでは、見た目上の変化は起こらないという点です。

横並びにする場合と違って、グリッド状にするには、「何列にするか」という列数(カラムの数)を指定しなければグリッド状に並べようがないからです。
そのためグリッドレイアウトを指定する場合は、カラムの数と幅を指定するCSSプロパティの「grid-template-columns(グリッドテンプレートカラムズ)」をdisplay:grid;とセットで指定します。


grid-template-columnsとは、グリッドレイアウトの列(カラム)を、どれぐらいの幅で何列にするか?という設定を行うためのCSSプロパティです。
grid-template-columnsの値は、数値+単位もしくはキーワード値で指定します。
基本的には「widthの設定」と同じだと思って大丈夫です。pxといった一般的な単位の他、autoやfit-contentなどのキーワード値があります。widthについての記事は▶︎こちら

また、gird-template-columnsはカラムの数だけ値を指定します。例えばカラムの数を3にして、なおかつ1列あたり200pxの幅にしたい場合は、以下のようになります。

*grid-template-columnsの構文例
■ セレクタ { gird-template-columns: 200px 200px 200px; }

値と値の間に「,(カンマ)」などは入らないので注意してくださいね。

それでは注意点に気をつけながら、サンプルコードと表示結果を見ていきましょう!

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

    .gridbox1 {
      display: grid;
      grid-template-columns: 200px 200px 200px;
      overflow-x: scroll;
    }
    .gridbox1 p {
      background-color: lightgreen;
      padding:10px;
      margin: 5px;
    }
    .gridbox1 p:nth-child(2n+1) {
      color: white;
      background-color: darkgreen;
    }

グリッド1

グリッド2

グリッド3

グリッド4

グリッド5

グリッド6

というわけで、横2×縦3列の格子状にすることができました。しかし、上記の例ではgrid-template-columnsを全て200pxにしているので、表示させるのに少なくとも200×3=600px以上の幅がないと納まりません。なので、スマホから見てくださっている方はグリッドレイアウトの中で右にスクロールができるようになっていると思います。

ですが、できればPCでは広く表示して、スマホではキュッと納まるようにしたいですよね。しかも全て同じ幅か、一定の比率(2:1:1など)で揃えたい場合が多いです。そこで、grid-template-columnsにはフレックスボックスにはない単位が用意されています。


それが、「fr(fractionの略)」という単位です。

細かいことはさておき、簡単に説明すると、
1fr=基準の幅で、2fr=1frの2倍ということになります。

すなわち、3列のカラムを設定するとして、全て同じ幅で画面幅・親要素幅に合わせて伸び縮みさせたい場合は、

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

ということになりますし、1列目を他の列の2倍の幅にしたい場合は、

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

と指定すれば良いことになります。以下は、2fr 1fr 1fr と指定した場合のサンプルコードと表示結果です。

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

    .gridbox1 {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
    }
    .gridbox1 p {
      background-color: lightgreen;
      padding:10px;
      margin: 5px;
    }
    .gridbox1 p:nth-child(2n+1) {
      color: white;
      background-color: darkgreen;
    }

グリッド1

グリッド2

グリッド3

グリッド4

グリッド5

グリッド6

というワケで、画面(親要素)幅に合わせて伸び縮みさせつつ、グリッドアイテムの幅の比率を一定に保つことができました。
この「fr(フラクション)」は、グリッドレイアウトではとても大切でよく使う単位なので、しっかり使いこなせるように練習してみてくださいね!

    POINT!
  1. ・display:grid;でグリッドを定義できるが、これだけでは見た目は変わらない!
  2. ・グリッド表示にするには、grid-template-columnsを指定する必要がある!
  3. ・grid-template-columnsは、列の数だけ値を指定する!
  4. ・grid-template-columnsでは、fr(フラクション)という単位が使えて、要素の幅に合わせて一定の比率を保ったまま伸び縮みさせることができる!

◆ グリッド線の考え方 ◆

冒頭で例に出した、「一部のアイテムだけ縦・横に広く幅を取りたい」という場合の、下の図をもう一度ご覧ください。

要素1要素2要素3
要素4要素5

こういったレイアウトを設定したい場合には、grid-row-start(end)と、grid-column-start(end)というCSSをグリッドアイテムに指定する必要があるのですが、それにはまず「グリッド線」を理解することが欠かせません。

なのでCSSの調整を紹介する前に、まずはグリッド線について解説をしていきます。

*グリッド線の考え方*
グリッドレイアウトはいわゆる「格子状(網目状)」の配置になるので、表のように行と列ができます。そして、行と列をラインで表すことができます。これが、グリッド線です。
行と列があるということは、2種類のグリッド線があるということになります。

そしてグリッド線の理解で最も大切なポイントは、それぞれどこを1本目と数えるか?に尽きます。

下の図をご覧ください。
グリッド状に配置された要素の行に赤い線、列に青い線でそれぞれラインを引いています。そして、ラインには番号がついています。

grid1

grid2

grid3

grid4

grid5

grid6

grid7

grid8

grid9

赤線はgrid-rowのライン

青線はgrid-columnのライン

図中にも書いてますが、赤い線が「grid-row」と呼ばれるラインで、青い線が「grid-column」と呼ばれるラインです。そして、1から順に数えていきます。
grid-rowであれば上端が1本目、grid-columnであれば左端が1本目となります。

そして、一部のグリッドアイテムの幅を調整するにはアイテムに対して、「グリッド線のどこからどこまで幅を取るか?」という指定をします。
その調整CSSプロパティが、grid-row-start(end)、grid-column-start(end)というワケです。

    POINT!
  1. ・グリッドアイテムの一部の幅を広く取るには、グリッド線を理解する必要がある!
  2. ・グリッド線とは、グリッドレイアウトの行と列のライン!
  3. ・行(横線)が、grid-rowのライン!(上から下に数える)
  4. ・列(縦線)が、grid-columnのライン!(左から右に数える)

◆ グリッドアイテムの一部の大きさを変えるには ◆

グリッド線の概念がわかれば、一部のグリッドアイテムだけ幅を変えるのも簡単です。考え方としては、「グリッド線のどこからどこまで幅を取るか」という指定を行うことで、幅を確保します。

例えば下図のように、3×3=合計9つのグリッドアイテムがあったとします。

要素1要素2要素3
要素4要素5要素6
要素7要素8要素9

そして、要素1を左上の4マス分(要素1、要素2、要素4、要素5)の幅に広げたいとしましょう。

この時、grid-row-startと、grid-column-startはどちらも「1」です。それぞれ上端と左端がスタートですからね。
そしてgrid-row-endは「3」になります。グリッドアイテムの間に余白をつけているので、要素1の下の線と要素4の上の線が別のものに見えてしまいますが、これは1本のラインであると考えます。
そして同様に考えて、grid-column-endも「3」になります。
また、display:grid;と、grid-template-columnsは親要素に設定しますが、grid-row-startなどはグリッドアイテムに指定します。

こういうのは一度サンプルコードと表示結果を見てみた方が早いので、確認していきましょう!

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

      .gridbox1 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
      }
      .gridbox1 p {
        background-color: lightgreen;
        padding:10px;
        margin: 5px;
      }
      .gridbox1 p:nth-child(2n+1) {
        color: white;
        background-color: darkgreen;
      }
      .griditem {
        background-color: darkorange !important;
        grid-row-start: 1;
        grid-row-end: 3;
        grid-column-start:1 ;
        grid-column-end: 3;
      }

グリッド1

グリッド2

グリッド3

グリッド4

グリッド5

グリッド6

グリッド7

グリッド8

グリッド9

grid-row-startなどのプロパティを設定したグリッドアイテム1のみ、左上4マス(グリッドアイテム4個分)に広げることができました。

このgrid-row-start(end)、grid-column-start(end)、それぞれ値を変えるとどうなるか試したいですよね?笑
ということで、ボックスの数値がgrid-row-startなどの値に反映される機能を用意しました。色々と試してみて、グリッド線の考え方を理解するのに役立ててください!


change item

grid2

grid3

grid4

grid5

grid6

grid7

grid8

grid9

grid-row-start

grid-row-end

grid-column-start

grid-column-end

*タブが全て表示されていない場合は右にスクロールできます*


このグリッド線という考え方はフレックスボックスには無く、グリッドレイアウトの自由度を高めている一方で複雑にしている要因でもあります。そのため、単に横並びにするだけで良いのであれば、どちらかと言うとフレックスボックスの方が容易です。

Webサイトメニューの横並びはフレックスボックス、画像ギャラリーはグリッドレイアウトなど、用途や目的に応じて使い分けられるようになることが大切です。

    POINT!
  1. ・グリッドアイテムの一部だけ広く幅を取りたい場合は、grid-row-start(end)、grid-column-start(end)を使う!
  2. ・それぞれ「グリッド線のどこからどこまで幅を取るか」という意味になる!
  3. ・用途に応じてフレックスボックスとの使い分けが大事!

ワンポイントチェック

グリッドレイアウトに関連するCSSは本当に複雑で、全て紹介していたら記事の文章量が膨大になるので省かざるを得ないのですが、少し補足説明をしておきます。

記事本文で、grid-template-columnsというCSSプロパティを紹介しましたが、実はgrid-template-rowsというプロパティもあります。
grid-template-rowsは、グリッドレイアウトの縦の幅と行の数を指定するものですが、グリッドレイアウトにしたい場合、普通は行数が問題になることはありません。
列数さえ決まれば、行数はグリッドアイテムの数に合わせて勝手に増えてくれたらそれで良いからです。
というわけで、grid-template-rowsに関してはそんなに気にしなくてよいです。(幅を明確に定義したい場合は別ですが)

また、グリッド線という考え方を理解するには、grid-○○-stratとgrid-○○-endを分けた方がわかりやすいので分けましたが、これらは一括指定することが可能です。

例えば、grid-row-start:1; grid-row-end:3; としたい場合、grid-rowというCSSプロパティを用いて、

■ セレクタ { grid-row: 1 / 3; }

と、書くこともできます。同じように、grid-columnというCSSプロパティを使って、grid-column-startとgrid-column-endを一括指定することもできます。

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

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

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      .gridbox {
        display: grid;
        background-color: rgba(223, 223, 223,0.5);
        margin: 15rem auto;
      }
      .gridbox p {
        padding: 1rem;
        margin: 1rem;
        background-color: lightblue;
      }
      .gridbox p:nth-child(2n) {
        background-color: lightgreen;
      }
      .gridbox1 {
        grid-template-columns: 300px 300px 300px
      }
      .gridbox2 {
        grid-template-columns: 1fr 2fr 1fr;
      }
      .gridbox3 {
        grid-template-columns: 1fr 1fr 1fr;
      }
      .griditem{
        grid-row-start: 1;
        grid-row-end: 5;
        grid-column-start: 1;
        grid-column-end: 3;
      }
    </style>
  </head>
  <body>
    <div class="gridbox gridbox1">
      <p>グリッド1</p>
      <p>グリッド2</p>
      <p>グリッド3</p>
      <p>グリッド4</p>
      <p>グリッド5</p>
      <p>グリッド6</p>
      <p>グリッド7</p>
      <p>グリッド8</p>
      <p>グリッド9</p>
    </div>

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

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

  </body>
</html>

« »

カテゴリーリンク

著者について- author profile -

ROYDOプロフィール写真
Michihiro

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

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

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

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

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

Twitterアイコン Instagramアイコン