display: grid によるレイアウトについて知ってみる[css]

display: grid によるレイアウトについて知ってみる
この記事をシェアする:
以前の記事、
カード型レイアウトと相性抜群!gapプロパティを使った簡単レイアウト[css]
では、カード型レイアウトともとても相性が良い、
cssの「gapプロパティ」を使ったレイアウト方法についてご紹介しました。

今回の記事では、その「gapプロパティ」と組み合わせて使う上でも便利な
レイアウト手法である、「cssの display: grid プロパティ」によるレイアウトについて書いていきます。

display: grid を指定するだけで、その要素は「グリッドコンテナー」と言う概念になる

それでは、「cssの display: grid プロパティ」によるレイアウトについて見ていきたいと思います。
前回の記事と同様に、次の様なカード型レイアウトをする場合の話です。
gapプロパティを使用したカード型レイアウトの例
↑このようなカード型レイアウトを作成する場合、
従来通り、もちろん display: flex; を使用しても実現が可能ですが、
display: grid; を使用すると、もっと簡単になります。
具体的には、次の様に書きます。

[cssのgridプロパティによるレイアウトの例(css)]

.my-container {
  display: grid;
  gap: 2rem 2%;
  grid-template-columns: 1fr 1fr 1fr;
  margin: 0 auto;
  width: 1200px;
}
...(中略)...

↑各カードが並ぶ想定の、親ボックスに指定するcssとして読んでください。
2行目でまず、display: grid; を指定。
これにより、この親ボックスが「グリッドコンテナー」と言う概念になります。
同時に、その小要素(この例で言うと個々のカード)は「グリッドアイテム」と言う概念になります。

続く3行目では、
前回の記事でも登場した gap です。これで、各カード間の余白を指定しています。

そして4行目。
grid-template-columns: 1fr 1fr 1fr;
という指定がありますが、これが「グリッドアイテム」をどう並べるのか、と言うことを定義している部分になります。
今回は、冒頭のキャプチャの様に「3列」で並べたいため、この指定をしています。

もしも各カードを「1列」で並べたい場合の指定は
grid-template-columns: 1fr;
となり、
もしも各カードを「2列」で並べたい場合の指定は
grid-template-columns: 1fr 1fr;
と指定します。

もしも各カードを「4列」で並べたい場合の指定は
grid-template-columns: 1fr 1fr 1fr 1fr;
を指定すれば良いです。(次のキャプチャの様になります。)
1frを4つ並べれば4列になる

また、最初のカードを2枚分、その隣に1枚ずつ並べる場合は
grid-template-columns: 2fr 1fr 1fr;
と指定します。すると、次の様なレイアウトが実現できます。
2fr-1fr-1fr を指定した場合の例

…いかがでしょうか。
display: flex;
を使った場合のレイアウトに比べて、かなり柔軟に
指定ができると言うことが、お分かりいただけたかと思います。

次のセクションで、htmlを含めたコードの全体像を書いておきます。

コード全体像

「cssの display: grid; プロパティ」を使ったカード型レイアウトの、htmlとcss全体は以下のようになります。

[「cssの display: grid プロパティ」を使ったカード型レイアウト(html側)]

  <div class="my-container">
    <div class="my-item">
      <figure class="my-figure">
        <img class="my-image" src="https://picsum.photos/560/320?grayscale&random=1" alt="サムネイル" />
      </figure>
      <div class="my-description">
        <p class="my-text">display: grid; プロパティを使ったカード型レイアウト</p>
      </div>
    </div>

    <div class="my-item">
      <figure class="my-figure">
        <img class="my-image" src="https://picsum.photos/560/320?grayscale&random=2" alt="サムネイル" />
      </figure>
      <div class="my-description">
        <p class="my-text">display: grid; プロパティを使ったカード型レイアウト</p>
      </div>
    </div>

    <div class="my-item">
      <figure class="my-figure">
        <img class="my-image" src="https://picsum.photos/560/320?grayscale&random=3" alt="サムネイル" />
      </figure>
      <div class="my-description">
        <p class="my-text">display: grid; プロパティを使ったカード型レイアウト</p>
      </div>
    </div>

    <div class="my-item">
      <figure class="my-figure">
        <img class="my-image" src="https://picsum.photos/560/320?grayscale&random=4" alt="サムネイル" />
      </figure>
      <div class="my-description">
        <p class="my-text">display: grid; プロパティを使ったカード型レイアウト</p>
      </div>
    </div>
    
    <div class="my-item">
      <figure class="my-figure">
        <img class="my-image" src="https://picsum.photos/560/320?grayscale&random=5" alt="サムネイル" />
      </figure>
      <div class="my-description">
        <p class="my-text">display: grid; プロパティを使ったカード型レイアウト</p>
      </div>
    </div>

    <div class="my-item">
      <figure class="my-figure">
        <img class="my-image" src="https://picsum.photos/560/320?grayscale&random=6" alt="サムネイル" />
      </figure>
      <div class="my-description">
        <p class="my-text">display: grid; プロパティを使ったカード型レイアウト</p>
      </div>
    </div>
  </div>

[「cssの display: grid プロパティ」を使ったカード型レイアウト(css側)]

  .my-container {
    display: grid;
    gap: 2rem 2%;
    grid-template-columns: 2fr 1fr 1fr; /* レイアウトに応じてここを可変 */
    margin: 0 auto;
    width: 1200px;
  }
  .my-item {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    overflow: hidden;
  }
  .my-figure {
    height: 180px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 100%;
  }
  .my-image {
    display: block;
    width: 100%;
  }
  .my-description {
    font-size: .875rem;
    height: 80px;
    padding: 1rem;
  }
  .my-text {
    margin: 0;
  }

「グリッドコンテナー」に指定できる項目はまだまだある

display: grid; を使用すると、柔軟にレイアウトが組めると言うことが、ここまでで理解いただけたことと思います。

この display: grid; ですが、
とても奥が深く、上のセクションでご紹介した手法の他に、
個々のグリッドを繰り返す際に使える
repeat
や、
グリッドのサイズ変化による影響を調整をすることがができる
minmax関数、

さらに理解を深めると、
グリッド線の概念が登場します。

今回の記事ではボリュームが多くなりすぎてしまうため、
それらの説明は割愛しますが、いやはや
この display: grid; というのは

かなり複雑なレイアウトに対応する事ができる
強力なプロパティである、
と言うことは充分ご理解いただけたかと思います。

MDNでの解説ページ

ご存知、Mozillaが運営する、Web技術に関するとても充実したオンラインリファレンスである MDN Docs 内においての、
display: grid; に関する解説ページは次のリンク先になります。

グリッドレイアウトの基本概念 | MDN

↑こちらの解説ページには、
上のセクションで名前だけ登場した

repeat
minmax関数
グリッド線の概念

等々の、かなり詳細な解説が記載されています。熟読すると、「display: grid;」に関しての理解が深まる事と思います。

この記事のまとめ

今回は、カード型レイアウトともとても相性が良い
cssの「display: grid;」を使ったレイアウト手法についての記事を書きました。

Web制作案件において
商品一覧のページを組む際や、
記事をカード型レイアウトで見せたい時などなど、

この「display: grid;」を使ったレイアウト手法を覚えておくと、
きっと活躍してくれることかと思います。

※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。

この記事をシェアする: