subgridを使ってカード型レイアウトを作成

通常のCSS Gridではカード型レイアウトなどのアイテム（子要素）の縦位置を揃える事がとても難しく、コンテンツによってタイトルの文字数が異なる場合など、高さを指定しないとズレてしまいます。
2024年9月現在、主要ブラウザはすべてsubgridに対応しているので、積極的に使っていきましょう。

caniuse.com

通常のdisplay:grid

grid-template-rows: subgrid の場合

subgridの使い方

subgridは小アイテムに指定する必要があります。この際にアイテム内にいくつの要素が必要が考えます。
今回は見出し、画像、説明文、カテゴリーの4つが必要です。

.box{
padding: 20px;
display: grid;
grid-template-rows: subgrid;
grid-row: span 4;/* .box内の要素が4行になる */
row-gap: 15px;/* subgrid内の要素の間隔 */
}

cssで3行以上の文字を省略

ブログなどで文字数が記事により大きく異なる場合、デザイン上、文字が3行以上になる場合、省略したい事があります。cssで文字を省略出来るので設定してみましょう。

overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;