3列カードグリッド

カード ／ パターン集トップ

サービスや記事一覧。auto-fitで幅に応じて列数が変わる

プレビュー#

調整する#

コピーする#

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

<section class="card-grid page" aria-labelledby="card-grid-title">
  <h2 id="card-grid-title">取り組み</h2>
  <ul class="card-grid__list">
    <li class="card"><h3>設計</h3><p>情報の順序と余白を先に決める。</p></li>
    <li class="card"><h3>実装</h3><p>トークン名を揃え、後から色だけ差し替える。</p></li>
    <li class="card"><h3>公開</h3><p>375pxとキーボード操作を最後に通す。</p></li>
  </ul>
</section>

.card-grid__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--card-gap, var(--space-5));
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.card h3 {
  margin: 0;
  font-size: var(--text-base);
}
.card p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

確認する#

• 320pxで1列に自然に落ちる
• カード内の見出しと本文の間隔が一定
• gapで間隔を取りmargin相殺がない

関連#

• グリッド
• 構図のパターン
• 出発点のCSS