如何用CSS Grid快速实现12列栅格系统？-css教程-PHP中文网

应使用 minmax(0, 1fr) 替代 1fr，避免小屏撑破；断点需重置 grid-template-columns 并同步调整 gap；子项用 grid-column: span n 控制跨列，禁用 width/margin/float。

如何用css grid快速实现12列栅格系统？

直接写 grid-template-columns: repeat(12, 1fr) 是错的——小屏下内容撑破、断点失效、嵌套错位，根本跑不起来。

为什么 `repeat(12, 1fr)` 不能直接用

因为 1fr 是“剩余空间均分”，不是“固定占比”。当容器窄、内容宽（比如长英文单词或未约束尺寸的图片）时，Grid 会强行拉伸列宽，触发横向滚动；它也不自动处理 gap 占位、响应式切换或偏移逻辑。Bootstrap 的 col-4 要的是稳定 ≈33.33% 宽度，不是“尽量分但可能崩掉”。

minmax(0, 1fr) 才是关键：允许列收缩到 0，避免撑破，同时保留等分语义
列轨道定义和子项跨度必须解耦——容器定轨道，子项用 grid-column: span N 控制占几格
IE11 不支持 minmax()，若需兼容，得用 @supports 降级为 float 或 flex

怎么写容器的 `grid-template-columns`

别写死 1fr，也别用百分比硬算（如 8.333%），用 minmax()+repeat() 组合才是健壮写法：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .container {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

断点值要和业务一致（比如 Bootstrap 是 576px/768px，这里按常见设备取 768px/1024px）
每档断点都重置 grid-template-columns，不能只改子项 grid-column——否则列轨道没变，span 会跨错线
gap 值也要随断点变（移动端 16px，桌面 32px），别用 margin 模拟留白

子项怎么对应 `col-3`、`col-md-6` 这种类名

不用生成一堆 .col-1 到 .col-12 类——直接用属性选择器或 BEM 命名绑定 grid-column：

.grid__col--3 { grid-column: span 3; }
.grid__col--6 { grid-column: span 6; }

@media (min-width: 768px) {
  .grid__col-md--6 { grid-column: span 6; }
}