1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
---
title: 卡片
slug: Web/CSS/Layout_cookbook/卡片
translation_of: Web/CSS/Layout_cookbook/Card
---
<p>{{CSSRef}}</p>
<p class="summary">这个模式是带有页脚选项的卡片组件列表。</p>
<p class="summary"></p>
<p><img alt="Three card components in a row" src="https://mdn.mozillademos.org/files/16278/cards.png" style="height: 1172px; width: 1629px;"></p>
<h2 id="要求">要求</h2>
<p>卡片组件可以包含各种内容，包括一个头部(heading)，图片，内容和一个页脚(footer)</p>
<p>每个卡片组件应有相同的高度，并且页脚应该在卡片组件的底部</p>
<p>当添加到卡片组中时，卡片上下应对齐。</p>
<h2 id="使用指南">使用指南</h2>
<p>{{EmbedGHLiveSample("css-examples/css-cookbook/card.html", '100%', 1720)}}</p>
<div class="note">
<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/card--download.html">Download this example</a></p>
</div>
<h2 id="所选方案">所选方案</h2>
<p>卡片布局使用 <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS 网格布局</a>(<a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>) 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:</p>
<pre class="brush: css">.card {
display: grid;
grid-template-rows: max-content 200px 1fr;
}</pre>
<p>The heading track is set to {{cssxref("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 <code>1fr</code>. This means it will take up any additional space. </p>
<p>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.</p>
<div class="note">
<p><strong>Note</strong>: 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.</p>
</div>
<h2 id="Useful_fallbacks_or_alternative_methods">Useful fallbacks or alternative methods</h2>
<p><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a> 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.</p>
<p>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 <a href="/en-US/docs/Web/CSS/CSS_Columns">CSS multi-col</a> — this would cause the cards to lay out down the columns, which may or may not be a problem.</p>
<p>See the <a href="/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts">columns recipe</a> for demonstrations of each of these layout methods.</p>
<h2 id="Accessibility_concerns">Accessibility concerns</h2>
<p>Depending on the content of your card there may be things you could, or should do to enhance accessibility. See <a href="https://inclusive-components.design/cards/">Inclusive Components: Card</a> by Heydon Pickering, for a very detailed explanation of these issues.</p>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>The various layout methods have different browser support. See the charts below for details on basic support for the properties used.</p>
<div class="hidden">
<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
</div>
<h4 id="grid-template-columns">grid-template-columns</h4>
<p>{{Compat("css.properties.grid-template-columns")}}</p>
<h4 id="grid-template-rows">grid-template-rows</h4>
<p>{{Compat("css.properties.grid-template-rows")}}</p>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
<li>{{Cssxref("grid-template-columns")}}, {{Cssxref("grid-template-rows")}}, {{Cssxref("grid-gap")}}</li>
<li><a href="https://inclusive-components.design/cards/">Inclusive Components: Card</a></li>
</ul>
|
