如何使用CSS Grid制作卡片布局_网格容器与子元素实战-css教程-PHP中文网

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

P粉602998670

发布： 2025-11-06 19:17:08

原创

125人浏览过

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

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

用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()函数实现响应式列宽

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

卡拉OK视频制作

卡拉OK视频制作，在几分钟内制作出你的卡拉OK视频

178

查看详情

.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结构：

<div class="container">
  <div class="card"><h3>卡片1</h3><p>内容描述</p></div>
  <div class="card"><h3>卡片2</h3><p>内容描述</p></div>
  <div class="card"><h3>卡片3</h3><p>内容描述</p></div>
  <div class="card"><h3>卡片4</h3><p>内容描述</p></div>
</div>

登录后复制

CSS样式：

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

登录后复制

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

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

以上就是如何使用CSS Grid制作卡片布局_网格容器与子元素实战的详细内容，更多请关注php中文网其它相关文章！