特徴の3列グリッド

LPの節 ／ パターン集トップ

強みを3つ並べる定番の節。auto-fitで1〜3列に変わる

プレビュー#

調整する#

コピーする#

上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。

<section class="feature-grid page" id="reason" aria-labelledby="feature-grid-title">
  <h2 id="feature-grid-title">選ばれている理由</h2>
  <ul class="feature-grid__list">
    <li class="feature-grid__item">
      <span class="feature-grid__icon" aria-hidden="true"><!-- 24pxのSVGを置く --></span>
      <h3>その日の分だけ焼く</h3>
      <p>朝いちばんに焼いた分だけを、その日のうちに売り切ります。前の日の豆は棚に戻しません。</p>
    </li>
    <li class="feature-grid__item">
      <span class="feature-grid__icon" aria-hidden="true"><!-- 24pxのSVGを置く --></span>
      <h3>9か国の豆を常時置く</h3>
      <p>浅煎りから深煎りまで、飲み比べられる幅で産地をそろえています。</p>
    </li>
    <li class="feature-grid__item">
      <span class="feature-grid__icon" aria-hidden="true"><!-- 24pxのSVGを置く --></span>
      <h3>淹れ方を書いて渡す</h3>
      <p>豆ごとに合う挽き目と湯温をメモに書き、袋に添えてお渡しします。</p>
    </li>
  </ul>
</section>

.feature-grid__list {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--fg-min, 16rem)), 1fr));
}
.feature-grid__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.feature-grid__icon {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-accent);
  color: var(--color-accent-text);
}
.feature-grid__item h3 {
  margin: 0;
  font-size: var(--text-base);
}
.feature-grid__item p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

確認する#

• アイコンが装飾なら aria-hidden="true" を付けている
• 3枚の説明文の行数を揃えている（1枚だけ長くしない）
• 列の最小幅は、見出しが2行以内で収まる値にしている

関連#

• グリッド
• 視覚階層
• 3列カードグリッド
• 出発点のCSS