卡片

创建一个卡片组，每个卡片组件包含标题、图像、内容以及可选的页脚。

卡片组中的每张卡片都应具有相同的高度。可选的卡片页脚应粘贴在卡片底部。

组中的卡片应在两个维度上对齐——垂直和水平。

尽管布局是一维的，但每张卡片都是使用CSS 网格布局进行布局。这使得可以使用内容大小调整网格轨道。要设置单列网格，我们可以使用以下方法

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

display: grid 将元素转换为网格容器。grid-template-rows 属性的三个值将网格划分为至少三行，并按顺序定义卡片的前三个子元素的高度。

每个card都包含一个<header>、<img>和<div>，按此顺序，其中一些还包含<footer>。

标题行或轨道设置为max-content，这可以防止它拉伸。图像轨道的高度设置为 200 像素。第三个轨道（内容所在的位置）设置为1fr。这意味着它将填充任何额外的空间。

超过三个具有明确定义大小的子元素将创建隐式网格中的行，这些行适合添加到其中的内容。默认情况下，这些行会自动调整大小。如果卡片包含页脚，则会自动调整页脚的大小。存在页脚时，它会粘贴在网格底部。页脚会自动调整大小以适合其内容；然后内容<div>会拉伸以占用任何额外的空间。

以下规则集创建了卡片网格

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}

grid-template-columns 属性定义网格列的宽度。在本例中，我们设置网格自动填充，并使用重复的列，这些列的最小宽度为 230px，但可以增长以填充可用空间。gap 属性设置相邻行和相邻列之间的间隙为 20px。

也可以使用 Flexbox 来布局每个卡片。使用 Flexbox，每个卡片行的尺寸由每行上的 flex 属性设置，而不是卡片容器。

使用 Flexbox，Flex 项目的尺寸是在子元素上定义而不是父元素。您选择使用网格还是 Flexbox 取决于您的偏好，即您是否更喜欢从容器控制轨道，或者更喜欢向项目添加规则。

我们为卡片选择了网格，因为通常您希望卡片在垂直和水平方向上都对齐。此外，可以使用子网格将每个卡片内的组件与相邻卡片的组件对齐。Flex 没有子网格的无 hack 等价物。

根据卡片的内容，您可能需要或应该做一些事情来增强可访问性。请参阅 Heydon Pickering 编写的 包容性组件：卡片，以获取对这些问题的详细解释。

• grid-template-columns
• grid-template-rows
• gap
• 包容性组件：卡片
• CSS 网格布局 模块