gridを使ったコーディング解説！カードレイアウトの見本あり

横並びのカードレイアウトってflexとかgridってあるけど、何でやったらいいんだろう？余白とか悩む・・・

どっちでもできるけど、時代はgridだね

デザインとかあるから一概にはいえないけど、俺はgrid一択だね

時代はgridっていうのは大袈裟だけど、gridは便利なのは間違いないね

今回はgridを使ったカードレイアウトを解説していくね！

flexとgridの違い結局どっちがいいの？
gridプロパティの紹介
gridレイアウトの見本
トップページなどで見るgridのカード3枚レイアウト
まとめ

flexとgridの違い結局どっちがいいの？

まずflexとgridの違いを見てみましょう。

Flexbox

1次元のレイアウト（主に行または列）に使用される。
コンポーネントのレイアウトや単一方向の配置に適している。
アイテムの順序変更が可能。
アイテム間のスペースやコンテンツの中央揃えが柔軟に制御可能。

CSS Grid

2次元のレイアウト（行と列）に使用される。
複雑なレイアウトやマルチカラムレイアウトに適している。
アイテムの順序変更が可能。
グリッド内のアイテム配置やスペースの制御が柔軟で高度。

んーよくわからない・・結局どっちがいいの
？

そもそもどっちが良いっていうのはないんだ

PCやスマホでの表示、子要素をどう表示させたいかで判断していくといいよ

gridプロパティの紹介

じゃあ、それぞれのプロパティを使用したサンプルコードを見てみよう

display: gridまたはinline-gridで、要素をグリッドコンテナにする

.container { 
  display: grid; /* または display: inline-grid; */
}

grid-template-columns と grid-template-rows: グリッドの列と行のサイズを指定する

.container {
 display: grid;
 grid-template-columns: 100px 200px 100px; /* 3つの列、それぞれの幅は指定 */
 grid-template-rows: 50px 100px; /* 2つの行、それぞれの高さは指定 */
 }

grid-gap: グリッドアイテム間の余白を指定する

.container {
 display: grid;
 grid-gap: 10px; /* グリッドアイテム間の余白を10pxに指定 */
 }

grid-template-areas: グリッドエリアの配置を指定する

.container {
 display: grid;
 grid-template-areas: "header header header" "sidebar main main" "footer footer footer";
 }

grid-column と grid-row: グリッドアイテムの開始と終了ラインを指定する

.item {
 grid-column: 2 / 4; /* グリッドの2列目から4列目まで */
 grid-row: 1 / 3; /* グリッドの1行目から3行目まで */
 }

justify-items と align-items: グリッドアイテムの水平方向と垂直方向の配置を指定する

.container {
 display: grid; justify-items: center; /* グリッドアイテムを水平方向に中央配置 */
 align-items: center; /* グリッドアイテムを垂直方向に中央配置 */
 }

justify-content と align-content: グリッドコンテナ内のアイテムの配置を調整する

.container {
 display: grid;
 justify-content: center; /* グリッドアイテムを水平方向に中央配置 */
 align-content: center; /* グリッドアイテムを垂直方向に中央配置 */ 
}

grid-auto-rows と grid-auto-columns: 自動配置されるアイテムのデフォルトのサイズを指定する

.container {
 display: grid;
 grid-auto-rows: 100px; /* 自動配置されるアイテムのデフォルトの行の高さを100pxに指定 */
 grid-auto-columns: 100px; /* 自動配置されるアイテムのデフォルトの列の幅を100pxに指定 */ }

さすがっす、こんな大量のテンプレ回答まじリスペクトっす

でもよくわかんないんで実物ほしいっす

gridレイアウトの見本

それでは下記コードのブラウザ表記を見てみましょう

イメージがしやすいと思います。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Layout Example</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
  </div>
</body>

</html>

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 3つの列を均等に分割 */
  grid-template-rows: repeat(3, 100px);
  /* 3つの行、それぞれの高さを100pxに指定 */
  gap: 10px;
  /* グリッドアイテム間の余白を10pxに指定 */
}

.item {
  background-color: #ddd;
  padding: 20px;
  text-align: center;
}

トップページなどで見るgridのカード3枚レイアウト

それでは実際にトップページでよく見るようなカードレイアウトを公開するね

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Layout Example</title>
  <link rel="stylesheet" href="riset.css">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="card__inner">
    <ul class="card__items">
      <li class="card__item">
        <a class="card__link" href="">
          <div class="card__imgWrap">
            <div class="card__img">
              <img src="https://placehold.jp/dd6503/ffffff/250x250.png" alt="">
            </div>
          </div>
          <div class="card__info">
            <h3 class="card__subTitele">タイトル</h3>
            <p class="card__text">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
            <div class="card__btn"><span class="card__more">MORE</span></div>
          </div>
        </a>
      </li>
      <li class="card__item">
        <a class="card__link" href="">
          <div class="card__imgWrap">
            <div class="card__img">
              <img src="https://placehold.jp/21ba47/ffffff/250x250.png" alt="">
            </div>
          </div>
          <div class="card__info">
            <h3 class="card__subTitele">タイトル</h3>
            <p class="card__text">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
            <div class="card__btn"><span class="card__more">MORE</span></div>
          </div>
        </a>
      </li>
      <li class="card__item">
        <a class="card__link" href="">
          <div class="card__imgWrap">
            <div class="card__img">
              <img src="https://placehold.jp/007bff/ffffff/250x250.png" alt="">
            </div>
          </div>
          <div class="card__info">
            <h3 class="card__subTitele">タイトル</h3>
            <p class="card__text">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
            <div class="card__btn"><span class="card__more">MORE</span></div>
          </div>
        </a>
      </li>
    </ul>
  </div>
</body>

</html>

@media screen and (min-width: 767px) {
  .card__inner {
    max-width: 1170px;
    width: 100%;
    margin-top: -6rem;
    position: relative;
    z-index: 10;
  }
}

.card__items {
  grid-template-columns: repeat(1, 1fr);
  row-gap: 3rem;
}

@media screen and (min-width: 767px) {
  .card__items {
    margin-top: 3rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    -moz-column-gap: 2%;
    column-gap: 2%;
  }
}

.card__imgWrap {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: -4rem;
  position: relative;
}

.card__img {
  width: 100%;
  padding-top: 50%;
  overflow: hidden;
  position: relative;
}

.card__img img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
  transition: 0.3s;
}

.card__info {
  background-color: #efefef;
  padding: 8rem 1.5rem 2rem;
}

.card__subTitele {
  font-size: 1.9rem;
  font-weight: 700;
  text-align: center;
}

.card__text {
  text-align: center;
  font-size: 1.4rem;
  margin-top: 1.5rem;
}

.card__btn {
  text-align: right;
  margin-top: 1rem;
  padding-right: 2rem;
}

.card__more {
  font-size: 1.6rem;
  font-family: "Barlow", sans-serif;
  line-height: 1;
}


@media (hover: hover) {
  .card__link:hover .card__img img {
    transform: scale(1.2);
  }

  .card__link:hover .card__more .arrowR {
    right: 1rem;
  }
}