CSSのsubgridがすべてのブラウザにサポートされたので、カード内の見出しやテキストを簡単に揃えることができます

サイト構築 -CSS

Post on:2023年10月4日

CSSのサブグリッド（subgrid）で子要素のグリッドを揃える

3つのカードがあり、それぞれに画像・見出し・テキストがあります。subgrid以前は、子要素（画像・見出し・テキスト）をそれぞれのカードで揃えることはできませんでした。もしくは、個別に一つひとつ調整する必要がありました。

subgrid以前: 水平のグリッドが揃っていない

subgridを使用すると、子要素のグリッドを揃えることが簡単にできます。

subgrid以後: 水平のグリッドが美しく揃う

実際の動作は、デモページでご覧ください。「Use Subgrid?」のチェックボックスをオンにすると、subgridが適用されます。
※Chrome 117, Edge 117, Safari, Firefoxでご覧ください。

See the Pen
Take CSS Subgrid for a spin! by coliss (@coliss)
on CodePen.

CSSのサブグリッド（subgrid）のサポートブラウザ

CSSのサブグリッド（subgrid）のサポートブラウザは、下記の通りです。

CSSのサブグリッド（subgrid）のサポートブラウザ

デモページの解説

まずは、HTMLから。main要素に3つのカードをarticle要素で実装しています。各カードには、画像・見出し・テキストのコンテンツがあります。

<main>
  <article class=card>
    <img src="https://picsum.photos/300/200?random=2" alt="">
    <h2>Exploring</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
    <a href="#">Read more...</a>
  </article>
  <article class=card>
    <img src="https://picsum.photos/300/200?random=3" alt="">
    <h2>CSS Subgrid</h2>
    <p>Id dolor laborum vitae. Enim ex ratione consectetur omnis consequuntur optio provident, possimus laborum nulla fugit</p>
    <a href="#">Read more...</a>
  </article>
  <article class=card>
    <img src="https://picsum.photos/300/200?random=5" alt="">
    <h2>Superpower</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
    <a href="#">Read more...</a>
  </article>
</main>

<main>

<h2>Exploring</h2>

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>

</article>

<h2>CSS Subgrid</h2>

<p>Id dolor laborum vitae. Enim ex ratione consectetur omnis consequuntur optio provident, possimus laborum nulla fugit</p>

</article>

<h2>Superpower</h2>

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>

</article>

</main>

articleはdisplay: grid;を使用して、親レイアウトコンテナによって定義されたトラックを使用します。これにより、カード内のコンテンツが配置しやすくなります。そして、grid-template-rowsの値にsubgridを設定します。親内の行を設定する必要はありません、親からの暗黙的なグリッドを使用して配置されます。

article {
  grid-row: span 4;
  display: grid;
  gap: 0.65rem;
  grid-template-rows: subgrid; 👈
}

article {

grid-row: span 4;

display: grid;

gap: 0.65rem;

grid-template-rows: subgrid; 👈

}

main要素のスタイルは、下記の通りです。

main {
  padding: 1rem 0;
  display: grid;
  width: min(calc(100% - 2rem), 1280px);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  position: relative;
}