主要观点：在网页开发中创建整洁且对齐良好的卡片布局是常见任务，本教程通过 CSS Grid 和 CSS Subgrid 构建每行四张卡片的网格布局，包括设置 HTML 结构、创建外部网格、定义卡片布局使用 Subgrid、放置卡片内容以及进行响应式设计等步骤。
关键信息：

• 要构建的内容：包含多个内容块（标题、图片、价格、要点列表、行动号召按钮）水平对齐的卡片网格布局，最多每行 4 张卡片。
• 为何使用 CSS Subgrid：可让嵌套网格继承父网格的轨道尺寸，简化内联内容对齐，避免复杂计算和技巧。

• 步骤详解：

  • 步骤 1：设置简单 HTML 结构和基础样式，通过 API 获取随机数据并展示在卡片中。
  • 步骤 2：创建外部 4 列网格，使用grid-template-columns: repeat(4, 1fr);定义。
  • 步骤 3：在每个卡片内使用grid-template-rows: subgrid;和grid-row: span 5 / span 5;定义卡片布局，使内联内容根据外部网格列对齐。
  • 步骤 4：添加卡片基础样式，无需为子块指定对齐方式。
  • 步骤 5：通过媒体查询或更新网格模板进行响应式设计，如在不同屏幕宽度下改变列数或使用grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));自动适配。

  重要细节：

• HTML 结构中包含卡片的各个内容块，通过类名区分。
• CSS 样式中对不同元素的样式设置，如图片的背景、描述的颜色等。
• 在使用 Subgrid 时，要注意指定内联网格从父网格继承的行数。
• 响应式设计部分通过不同媒体查询或网格模板来适应不同屏幕尺寸。