このページの中身

サブグリッドで行を揃えるカード

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

見出し・本文・リンクの行位置をカード間で揃える

プレビュー#

この枠の中は出発点のCSSの上で動いています。下のコードは、そちらを先に貼ってから足してください。

コピーする#

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

<ul class="card-subgrid">
  <li class="card-subgrid__item">
    <h3>短い見出し</h3>
    <p>本文は長さが違っても、ボタン行は下で揃う。</p>
    <a href="#">詳しく</a>
  </li>
  <li class="card-subgrid__item">
    <h3>やや長い見出しの例</h3>
    <p>サブグリッドで各行を共有する。Flexの伸びより整列が先。</p>
    <a href="#">詳しく</a>
  </li>
</ul>
.card-subgrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.card-subgrid__item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.card-subgrid__item h3 {
  margin: 0;
  font-size: var(--text-base);
}
.card-subgrid__item p {
  margin: 0;
  color: var(--color-text-muted);
}
/* 文字の行は30px。リンクの高さを44pxにする。行はサブグリッドで共有しているので、
   高さを足してもカードどうしの揃いは崩れない */
.card-subgrid__item a {
  align-self: end;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  color: var(--color-accent-text);
}

確認する#

関連#

この資料は、Webサイトを作るときに引くためのものです。 何のために作ったか。作っているのは AK²Lab。