概要
display: subgrid;を使用しパーツの高さを揃えたカードアイテムの実装方法を紹介用途・要件
- グリッドコンテナ、グリッドアイテム両方にdisplay: grid;を指定した上で、グリッドアイテムにdisplay: grid;を指定
注意事項
- グリッドコンテナ、グリッドアイテム両方にdisplay: grid;を指定。
- grid-row: span ⚫︎; “⚫︎”の部分にカード内に作成したい要素数を指定。
- subgridを指定したい要素がグリッドコンテナの直下にない場合（例：div>article>aのaタグにsubgridを指定したい場合）、間に挟まる要素にdisplay: contents;を指定する必要あり。
検証ブラウザ
- Google Chrome(最新)
- Microsoft Edge(最新)
- Firefox(最新)
- Safari(最新)
実装
ローカル環境にコードを移設した際に動作しない場合はこちら。（トラブルシューティングページへ）
