Card | CSS

在此页

要求
Recipe
Choices made
Useful fallbacks or alternative methods
可访问性关注
浏览器兼容性
另请参阅
相关话题

This pattern is a list of "card" components with optional footers.

Three card components in a row

要求

The card component can contain a variety of content, including a heading, image, content and a footer.

Each card should be the same height, and footers should stick to the bottom of the card.

When added to a collection of cards, the cards should line up in two dimensions.

Recipe

Download this example

Choices made

The card is laid out using CSS 栅格布局 despite being a single dimensional layout, as it enables the use of content sizing for the grid tracks. When setting up the single column grid I use the following:

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

The heading track is set to max-content , which prevents it from stretching. I have decided that I want my image to live within a track that is 200 pixels tall. I then set the next track — which is where the content lives — to 1fr . This means it will take up any additional space.

If the track does have a footer it will be auto-sized, as rows created in the implicit grid are auto-sized by default. Therefore this will fit the content added to it.

注意 : The various elements in separate cards do not align with each other, as each card is an independent grid. The proposed subgrid feature of Grid Level 2 would give a solution to this issue.

Useful fallbacks or alternative methods

Flexbox could be used to lay out the card, in which case you should make the content area grow, and other items not grow. This would be a reasonable way to lay out the card, although I have a slight preference for being able to control the tracks from the container rather than needing to add rules to the items.

For the overall layout you could use flexbox, however this will result in cards stretching over the final flex row where there are fewer than can fit in the rows above. Alternatively you could use CSS multi-col — this would cause the cards to lay out down the columns, which may or may not be a problem.

见 columns recipe for demonstrations of each of these layout methods.

可访问性关注

Depending on the content of your card there may be things you could, or should do to enhance accessibility. See Inclusive Components: Card by Heydon Pickering, for a very detailed explanation of these issues.

浏览器兼容性

The various layout methods have different browser support. See the charts below for details on basic support for the properties used.

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

grid-template-columns

更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`grid-template-columns`	Chrome 完整支持 57 完整支持 57 完整支持 29 Disabled Disabled 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 Alternate Name Alternate Name Uses the non-standard name: `-ms-grid-rows`	Firefox 完整支持 52 完整支持 52 不支持 40 — 59 Disabled Disabled ). To change preferences in Firefox, visit	IE 完整支持 10 Alternate Name 完整支持 10 Alternate Name Alternate Name Uses the non-standard name: `-ms-grid-columns`	Opera 完整支持 44 完整支持 44 完整支持 28 Disabled Disabled From version 28: this feature is behind the `Enable experimental Web Platform features` preference.	Safari 完整支持 10.1	WebView Android 完整支持 57	Chrome Android 完整支持 57 完整支持 57 完整支持 29 Disabled Disabled 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 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 完整支持 43 完整支持 43 完整支持 28 Disabled Disabled From version 28: this feature is behind the `Enable experimental Web Platform features` preference.	Safari iOS 完整支持 10.3	Samsung Internet Android 完整支持 6.0
Animation of tracks	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 66	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 66	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
`fit-content()`	Chrome 完整支持 29	Edge 完整支持 16	Firefox 完整支持 51	IE 不支持 No	Opera 完整支持 44	Safari 完整支持 10.1	WebView Android 完整支持 57	Chrome Android 完整支持 57	Firefox Android 完整支持 51	Opera Android 完整支持 43	Safari iOS 完整支持 10.3	Samsung Internet Android 完整支持 6.0
`minmax()`	Chrome 完整支持 57 完整支持 57 完整支持 29 Disabled Disabled From version 29: this feature is behind the `Enable experimental Web Platform features` preference. To change preferences in Chrome, visit chrome://flags.	Edge 完整支持 16	Firefox 完整支持 52 完整支持 52 不支持 40 — 59 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 完整支持 44 完整支持 44 完整支持 28 Disabled Disabled From version 28: this feature is behind the `Enable experimental Web Platform features` preference.	Safari 完整支持 10.1	WebView Android 完整支持 57	Chrome Android 完整支持 57 完整支持 57 完整支持 29 Disabled Disabled 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 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 完整支持 43 完整支持 43 完整支持 28 Disabled Disabled From version 28: this feature is behind the `Enable experimental Web Platform features` preference.	Safari iOS 完整支持 10.3	Samsung Internet Android 完整支持 6.0
`repeat()`	Chrome 完整支持 57 完整支持 57 完整支持 38 Disabled Disabled From version 38: this feature is behind the `Enable experimental Web Platform features` preference. To change preferences in Chrome, visit chrome://flags.	Edge 完整支持 16	Firefox 部分支持 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()` (见 bug 1350069 ). 不支持 40 — 59 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 完整支持 44 完整支持 44 完整支持 28 Disabled Disabled From version 28: this feature is behind the `Enable experimental Web Platform features` preference.	Safari 完整支持 10.1	WebView Android 完整支持 57	Chrome Android 完整支持 57 完整支持 57 完整支持 38 Disabled Disabled 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 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 完整支持 43 完整支持 43 完整支持 28 Disabled Disabled From version 28: this feature is behind the `Enable experimental Web Platform features` preference.	Safari iOS 完整支持 10.3	Samsung Internet Android 完整支持 6.0
`subgrid`	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 71 完整支持 71 完整支持 69 注意事项 Disabled 注意事项 Enabled by default in Firefox Nightly. Disabled ). To change preferences in Firefox, visit about:config.	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 不支持 No	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No

图例

完整支持
部分支持
不支持
见实现注意事项。
用户必须明确启用此特征。
使用非标名称。

grid-template-rows