BLOG ブログ

ホームページ制作
BLOG
【Gridは便利？】CSS Grid Layout(Grid)を使った実践的なコーディングサンプル3選！

【Gridは便利？】CSS Grid Layout(Grid)を使った実践的なコーディングサンプル3選！

更新日：2021/11/16

みなさんは実案件でGridを導入していますか？

GridはIE以外の主要ブラウザでサポートされています。
そのため、IE対応をしなければならない案件ではなかなか導入ができないのが実情です。。。

しかし、マイクロソフトから正式に、「Internet Explorer 11 デスクトップアプリは 2022 年 6 月 15 日にサポート終了」とお知らせがありました！

そのため今後は、今まで使うことができなかったGridを含むモダンなCSSプロパティを使う機会が増えてくるのではないかと思います。
（※サポートが終了するからといってIE対応が終了するわけではないのですが…）

そこで今回は、Gridを使用した実践的なコーディングサンプルを３つご紹介しようと思います！

※Gridの基礎的な使い方については解説していませんので、基礎が気になる方はご自身でお調べください

1 カード型レイアウト
- 1.1 ポイント解説
2 Gallery(ギャラリー)型レイアウト
- 2.1 ポイント解説
3 インナー幅からはみ出したレイアウト
- 3.1 ポイント解説
4 まとめ

カード型レイアウト

まずはとてもコーディング頻度の高いカード型レイアウトです。

デモを見る

ソースの表示


<div class="card-grid">
  <div class="card-grid__container">
    <div class="card-grid__item c-card">
      <div class="c-card__img-box">
        <img class="c-card__img" src="https://picsum.photos/500/400/" alt="">
      </div>
      <div class="c-card__text-box">
        <h2 class="c-card__title">タイトル</h2>
        <p class="c-card__text">ダミーテキスト</p>
        <div class="c-card__button-box">
          <a href="#" class="c-card__button">read more</a>
        </div>
      </div>
    </div>
    <div class="card-grid__item c-card">
      <div class="c-card__img-box">
        <img class="c-card__img" src="https://picsum.photos/500/400/" alt="">
      </div>
      <div class="c-card__text-box">
        <h2 class="c-card__title">タイトル</h2>
        <p class="c-card__text">ダミーテキスト</p>
        <div class="c-card__button-box">
          <a href="#" class="c-card__button">read more</a>
        </div>
      </div>
    </div>
    <div class="card-grid__item c-card">
      <div class="c-card__img-box">
        <img class="c-card__img" src="https://picsum.photos/500/400/" alt="">
      </div>
      <div class="c-card__text-box">
        <h2 class="c-card__title">タイトル</h2>
        <p class="c-card__text">ダミーテキスト</p>
        <div class="c-card__button-box">
          <a href="#" class="c-card__button">read more</a>
        </div>
      </div>
    </div>
    <div class="card-grid__item c-card">
      <div class="c-card__img-box">
        <img class="c-card__img" src="https://picsum.photos/500/400/" alt="">
      </div>
      <div class="c-card__text-box">
        <h2 class="c-card__title">タイトル</h2>
        <p class="c-card__text">ダミーテキスト</p>
        <div class="c-card__button-box">
          <a href="#" class="c-card__button">read more</a>
        </div>
      </div>
    </div>
  </div>
</div>

</div>

<p class="c-card__text">ダミーテキスト</p>

</div>

</div>

<p class="c-card__text">ダミーテキスト</p>

</div>

</div>

<p class="c-card__text">ダミーテキスト</p>

</div>

</div>

<p class="c-card__text">ダミーテキスト</p>

</div>


.card-grid__container {
  display: grid;
  gap: 20px;
  max-width: 1210px;
  margin: 0 auto;
  box-sizing: content-box;
  @media (min-width: 641px) {
    grid-template-columns: repeat(auto-fit, minmax(390px,1fr));
    padding: 40px;
  }
  @media (max-width: 640px) {
    padding: 20px;
  }
}

.c-card {
  filter: drop-shadow(4px 4px 20px rgba(0, 0, 0, 0.09));

  .c-card__img {
    width: 100%;
  }

  .c-card__text-box {
    padding: 20px;
    background-color: #fff;
  }

  .c-card__title {
    font-size: 20px;
    font-weight: bold;
  }

  .c-card__text {
    font-size: 16px;
  }

  .c-card__button {
    font-size: 18px;
    font-weight: bold;
  }
}

.card-grid__container {

display: grid;

gap: 20px;

max-width: 1210px;

margin: 0 auto;

box-sizing: content-box;

@media (min-width: 641px) {

grid-template-columns: repeat(auto-fit, minmax(390px,1fr));

padding: 40px;

}

@media (max-width: 640px) {

padding: 20px;

}

.c-card {

filter: drop-shadow(4px 4px 20px rgba(0, 0, 0, 0.09));

.c-card__img {

width: 100%;

}

.c-card__text-box {

padding: 20px;

background-color: #fff;

}

.c-card__title {

font-size: 20px;

font-weight: bold;

}

.c-card__text {

font-size: 16px;

}

.c-card__button {

font-size: 18px;

font-weight: bold;

}

ポイント解説

このコーディングのポイントは以下の部分です（重要な部分のみ抜粋）


.card-grid__container {
  display: grid;//★1
  gap: 20px;//★2
  @media (min-width: 641px) {
    grid-template-columns: repeat(auto-fit, minmax(390px,1fr));//★3
  }
}

.card-grid__container {

display: grid;//★1

gap: 20px;//★2

@media (min-width: 641px) {

grid-template-columns: repeat(auto-fit, minmax(390px,1fr));//★3

}

Gridを使うと、子要素のレイアウトを親要素で制御できる点がポイントです。

親要素の.card-grid__containerに対して、★1を宣言し、子要素のレイアウトを★3で制御しています。

★2もポイントで、このように指定すると子要素間の余白が20pxになります。

marginと何が違うの？
と思ったかもしれません。

marginの場合、marginを打ち消すという作業が発生します。
例えば今回のサンプルの場合、nth-child:3n+1の要素に対してmargin-left:0 の記述が必要です。

しかし、gapを使うとその打ち消しが不要になります！

ちなみに、gapプロパティはFlexboxでも同様に使えます！（※もちろんIE以外）

キーワード
・grid
・gap
・grid-template-columns
・minmax

Gallery(ギャラリー)型レイアウト

続いて、少し複雑なギャラリー型レイアウトです。

デモを見る