css网页多列卡片布局如何实现_使用Grid自动填充和间距设置-css教程-PHP中文网

css网页多列卡片布局如何实现_使用Grid自动填充和间距设置

P粉602998670

发布： 2025-12-15 08:37:54

原创

443人浏览过

使用CSS Grid的auto-fit与minmax可实现响应式多列卡片布局，自动适配屏幕宽度。通过grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))定义每列最小250px、最大均分剩余空间，结合gap设置间距，无需媒体查询即可在大屏、平板、手机上分别显示4~5、2~3、1列，且gap避免了margin错位问题，是当前最简洁高效的方案。

css网页多列卡片布局如何实现_使用grid自动填充和间距设置

在网页设计中，多列卡片布局非常常见，比如商品展示、作品集或文章列表。使用 CSS Grid 可以轻松实现响应式且自动填充的多列布局，并精确控制列与行之间的间距。

使用 Grid 实现自动填充多列布局

通过 grid-template-columns 结合 repeat() 和 auto-fit 或 auto-fill，可以让网格容器根据可用空间自动调整列数。

常用写法：

auto-fill：尽可能多地填充列，即使某些列为空。
auto-fit：只创建有内容的列，并拉伸它们填满剩余空间。
minmax() 设置每列最小和最大宽度，实现响应式效果。

示例代码：

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

登录后复制

这段代码表示：容器内创建多个列，每列最小 250px，最大为 1fr（均分剩余空间），并自动适配屏幕宽度。

立即学习“前端免费学习笔记（深入）”；

设置卡片之间的间距（gap）

使用 gap 属性可以统一设置行与列之间的间距，语法简洁，无需额外处理 margin 或 padding 导致的错位问题。

Avatar AI

AI成像模型，可以从你的照片中生成逼真的4K头像

查看详情

gap: 20px 表示行列间距均为 20px。
gap: 20px 10px 分别设置行间距和列间距（先行后列）。

结合上面的布局，完整样式如下：

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

.card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
}

登录后复制