在网页开发中，创建干净、对齐良好的卡片布局是一项常见任务。在本教程中，我将引导你构建一个每行四个卡片的网格。每张卡片都包含几个内容块——标题、图片、价格、项目符号列表和一个行动号召（CTA）按钮——这些内容块在卡片内部使用 CSS Grid 和强大的 CSS Subgrid 功能水平对齐。 你将构建什么 - 卡片网格布局（每行最多 4 张卡片）。 - 每张卡片包含多个水平对齐的内容块。 - 使用 CSS Grid 进行整体布局。 - 使用 CSS Subgrid 进行卡片内部内容的对齐。 为什么使用 CSS Subgrid？ CSS Subgrid 是一项相对较新的功能，它允许嵌套网格继承其父网格的轨道尺寸。这意味着你可以将内部内容与外部网格完美对齐，而无需手动计算或重复轨道尺寸。