カード

このパターンは、オプションのフッター付きの「カード」コンポーネントのリストです。

1行に3つのカードコンポーネント

要件

カードコンポーネントには、見出し、画像、コンテンツ、フッターなど、さまざまなコンテンツを含めることができます。

各カードは同じ高さでなければならず、フッターはカードの一番下に固定する必要があります。

カードのコレクションに追加すると、カードは2次元に並ぶ必要があります。

レシピ

行った選択

このカードは、1次元レイアウトであるにもかかわらず CSS グリッドレイアウトを使用してレイアウトされています。 これは、グリッドトラックに対してコンテンツのサイズ変更の使用が可能になるためです。 単一列グリッドを設定するときは、次のようにします。

.card {
  display: grid;
  grid-template-rows: max-content 200px 1fr;
}

見出しトラックは max-content に設定されているため、伸縮は行われません。 画像は 200 ピクセルの高さのトラック内に収めることにしました。 それから、その次のトラック(コンテンツが存在する場所)を 1fr に設定します。 これは、残りのスペースを占有することを意味します。

暗黙的にグリッドに作成された行はデフォルトで自動サイズ変更されるため、トラックにフッターがある場合は自動サイズ変更されます。 したがって、これは追加されたコンテンツにフィットします。

: 各カードは独立したグリッドであるため、別々のカードのさまざまな要素は互いに整列しません。 グリッドレベル 2 で提案されたサブグリッド機能は、この問題を解決するでしょう。

便利な代替方法

フレックスボックスを使ってカードをレイアウトすることもでき、その場合は、コンテンツ領域を大きくし、他の項目は大きくしないようにする必要があります。 これはカードをレイアウトするための合理的な方法ですが、私は、項目に規則を追加する必要があるのではなく、コンテナからトラックを制御できることをやや好みます。

全体的なレイアウトのためにフレックスボックスを使うことができますが、これは最終的なフレックス行の上で伸縮するカードをもたらすでしょう。 あるいは、CSS 段組みを使用することもできます — これにより、カードが段の上にレイアウトされることになりますが、これは問題になる場合もあれば、そうでない場合もあります。

これらの各レイアウト方法のデモについては、欄のレシピを参照してください。

アクセシビリティへの懸念

カードの内容によっては、アクセシビリティを高めるためにできること、あるいはすべきことがあるかもしれません。 これらの問題のとても詳細な説明については、Heydon Pickering による包括的なコンポーネント: カード(英語)を参照してください。

ブラウザー実装状況

さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。

grid-template-columns

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
grid-template-columnsChrome 完全対応 57
完全対応 57
完全対応 29
無効
無効 From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 16
完全対応 16
未対応 12 — 79
代替名
代替名 非標準の名前 -ms-grid-rows を使用しています。
Firefox 完全対応 52
完全対応 52
未対応 40 — 59
無効
無効 From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 10
代替名
完全対応 10
代替名
代替名 非標準の名前 -ms-grid-columns を使用しています。
Opera 完全対応 44
完全対応 44
完全対応 28
無効
無効 From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari 完全対応 10.1WebView Android 完全対応 57Chrome Android 完全対応 57
完全対応 57
完全対応 29
無効
無効 From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android 完全対応 52
完全対応 52
未対応 40 — 59
無効
無効 From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 43
完全対応 43
完全対応 28
無効
無効 From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 6.0
Animation of tracksChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 66IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 66Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
fit-content()Chrome 完全対応 29Edge 完全対応 16Firefox 完全対応 51IE 未対応 なしOpera 完全対応 44Safari 完全対応 10.1WebView Android 完全対応 57Chrome Android 完全対応 57Firefox Android 完全対応 51Opera Android 完全対応 43Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 6.0
minmax()Chrome 完全対応 57
完全対応 57
完全対応 29
無効
無効 From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 16Firefox 完全対応 52
完全対応 52
未対応 40 — 59
無効
無効 From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 44
完全対応 44
完全対応 28
無効
無効 From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari 完全対応 10.1WebView Android 完全対応 57Chrome Android 完全対応 57
完全対応 57
完全対応 29
無効
無効 From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android 完全対応 52
完全対応 52
未対応 40 — 59
無効
無効 From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 43
完全対応 43
完全対応 28
無効
無効 From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 6.0
repeat()Chrome 完全対応 57
完全対応 57
完全対応 38
無効
無効 From version 38: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 16Firefox 部分対応 57
補足
部分対応 57
補足
補足 repeat(auto-fill, ...) and repeat(auto-fit, ...) only support one repeated column (see bug 1341507).
未対応 52 — 57
補足
補足 calc() doesn't work in repeat() (see bug 1350069).
未対応 40 — 59
無効
無効 From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 44
完全対応 44
完全対応 28
無効
無効 From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari 完全対応 10.1WebView Android 完全対応 57Chrome Android 完全対応 57
完全対応 57
完全対応 38
無効
無効 From version 38: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android 完全対応 52
完全対応 52
未対応 40 — 59
無効
無効 From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 43
完全対応 43
完全対応 28
無効
無効 From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 6.0
subgridChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 71
完全対応 71
完全対応 69
補足 無効
補足 Enabled by default in Firefox Nightly.
無効 From version 69: this feature is behind the layout.css.grid-template-subgrid-value.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
部分対応  
部分対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
非標準の名前を使用しています。
非標準の名前を使用しています。

grid-template-rows

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
grid-template-rowsChrome 完全対応 57
完全対応 57
完全対応 29
無効
無効 From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 16
完全対応 16
未対応 12 — 79
代替名
代替名 非標準の名前 -ms-grid-rows を使用しています。
Firefox 完全対応 52
完全対応 52
未対応 40 — 59
無効
無効 From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 10
代替名
完全対応 10
代替名
代替名 非標準の名前 -ms-grid-rows を使用しています。
Opera 完全対応 44
完全対応 44
完全対応 28
無効
無効 From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari 完全対応 10.1WebView Android 完全対応 57Chrome Android 完全対応 57
完全対応 57
完全対応 29
無効
無効 From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android 完全対応 52
完全対応 52
未対応 40 — 59
無効
無効 From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 43
完全対応 43
完全対応 28
無効
無効 From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 6.0
Animation of tracksChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 66IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 66Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
fit-content()Chrome 完全対応 29Edge 完全対応 16Firefox 完全対応 51IE 未対応 なしOpera 完全対応 44Safari 完全対応 10.1WebView Android 完全対応 57Chrome Android 完全対応 57Firefox Android 完全対応 51Opera Android 完全対応 43Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 6.0
minmax()Chrome 完全対応 57
完全対応 57
完全対応 29
無効
無効 From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 16Firefox 完全対応 52
完全対応 52
未対応 40 — 59
無効
無効 From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 44
完全対応 44
完全対応 28
無効
無効 From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari 完全対応 10.1WebView Android 完全対応 57Chrome Android 完全対応 57
完全対応 57
完全対応 29
無効
無効 From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android 完全対応 52
完全対応 52
未対応 40 — 59
無効
無効 From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 43
完全対応 43
完全対応 28
無効
無効 From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 6.0
repeat()Chrome 完全対応 57
完全対応 57
完全対応 38
無効
無効 From version 38: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 16Firefox 部分対応 57
補足
部分対応 57
補足
補足 repeat(auto-fill, ...) and repeat(auto-fit, ...) only support one repeated column (see bug 1341507).
未対応 52 — 57
補足
補足 calc() doesn't work in repeat() (see bug 1350069).
未対応 40 — 59
無効
無効 From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 44
完全対応 44
完全対応 28
無効
無効 From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari 完全対応 10.1WebView Android 完全対応 57Chrome Android 完全対応 57
完全対応 57
完全対応 38
無効
無効 From version 38: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android 完全対応 52
完全対応 52
未対応 40 — 59
無効
無効 From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 43
完全対応 43
完全対応 28
無効
無効 From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 6.0
subgridChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 71
完全対応 71
完全対応 69
補足 無効
補足 Enabled by default in Firefox Nightly.
無効 From version 69: this feature is behind the layout.css.grid-template-subgrid-value.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
部分対応  
部分対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
非標準の名前を使用しています。
非標準の名前を使用しています。

 

関連情報