如何使用CSS Grid制作卡片布局_网格容器与子元素实战

使用CSS Grid可高效创建响应式卡片布局，通过display: grid、grid-template-columns、gap等属性定义容器和子项样式，结合minmax()与auto-fit实现自适应排列，无需额外JS即可完成多设备适配。

用CSS Grid制作卡片布局非常直观且高效。它能让你轻松控制行、列和对齐方式，特别适合响应式设计。下面通过一个实际例子，展示如何设置网格容器和子元素，快速搭建美观的卡片布局。

创建网格容器

要启用Grid布局，先为父容器设置display: grid。接着定义列宽、行高以及间距，让卡片整齐排列。

常用属性包括：

• grid-template-columns：定义每列的宽度。可用固定值（如200px）或弹性单位（如1fr）
• grid-gap 或 gap：设置卡片之间的间距
• grid-auto-rows：自动为行设定高度，适合内容不一的卡片

示例代码：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列等宽 */
  gap: 16px;
  padding: 20px;
}

设置网格子元素（卡片）

每个卡片作为Grid的子项，默认会按顺序填入网格单元格。你可以进一步控制它们的位置和跨度。

关键点：

• 无需额外设置子元素即可实现均匀分布
• 使用grid-column或grid-row让某个卡片跨列或跨行
• 可结合minmax()函数实现响应式列宽

例如，让第一个卡片横跨两列：

.card:first-child {
  grid-column: span 2;
}

响应式自适应布局

为了让卡片在不同屏幕下表现良好，可以结合minmax()和auto-fit实现自动换行与适配。

推荐写法：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  padding: 20px;
}

这段代码的意思是：每列最小250px，最大为1fr，浏览器会自动计算最多放几列，超出则换行。手机上可能只显示一列，平板两列，桌面三列以上，完全自适应。

完整实战示例

HTML结构：

  
卡片1
内容描述
  
卡片2
内容描述
  
卡片3
内容描述
  
卡片4
内容描述

CSS样式：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  padding: 20px;
}
.card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 16px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

这样就完成了一个简洁、响应式的卡片网格布局。添加更多卡片也会自动排列，维护成本低。

基本上就这些。Grid让布局变得更简单，掌握几个核心属性就能应对大多数场景。不复杂但容易忽略细节，比如gap兼容性和旧版浏览器支持，上线前记得测试。