カード型 記事一覧パーツ(subgridを使用しパーツの高さを揃えたカードアイテム)

[ ID : 12598 ]
カード型 記事一覧パーツ(subgridを使用しパーツの高さを揃えたカードアイテム)
実装目安
3分

概要

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(最新)

実装

このコンテンツの続きを閲覧するにはログインが必要です。 新規会員登録

この記事をシェアする

新着記事

全ての記事を見る

KONOCODEのメリット 無料会員登録