卡片
Baseline: Widely supported
Baseline is determined by this web feature being supported on the current and the previous major versions of major browsers.
这个模式是带有可选页脚的“卡片”组件列表。
需求
卡片组件可以包含各种内容,如头部、图片、内容和页脚。
每个卡片组件应有相同的高度,并且页脚应该在卡片组件的底部。
当添加到卡片组中时,卡片应在两个维度上对齐。
使用指南
所选方案
尽管是单维布局,该卡片还是使用 CSS 网格布局技术进行布局,因为它可以为网格轨道使用内容大小。在设置单列网格时,我使用了以下方法:
css
.card {
display: grid;
grid-template-rows: max-content 200px 1fr;
}
标题轨道被设置为 max-content
,这使得它不能被拉伸。我决定让我的图片放置在 200 像素高的轨道里。然后我把下一个轨道(也就是内容所在的地方)的高度设置为 1fr
。这意味着它将占用任何额外的空间。
如果该轨道确实有页脚,它将自动调整大小,因为在隐式网格中创建的行是默认自动调整大小的,这样可以让添加到其中的内容适合网格大小。
备注: 由于每张卡片都是独立的网格,所以独立卡片中的各种元素并不互相对齐。所提出的 Grid Level 2 的子网格功能将给这个问题一个解决方案。
有用的后备措施或替代方法
无障碍考虑
根据卡片的内容,你可以或应该做一些事情来加强无障碍性。请参阅 Heydon Pickering 撰写的 Inclusive Components: Card,那篇文章对这些问题进行了非常详细的解释。
浏览器兼容性
BCD tables only load in the browser