如何用CSS Grid实现12列响应式栅格系统-css教程-PHP中文网

直接用 grid-template-columns: repeat(12, 1fr) 是错的——因 1fr 会强制拉伸导致撑破，应改用 minmax(0, 1fr) 配合响应式断点重置列数与 gap，子项用 grid-column: span n 控制跨度，嵌套时需独立声明 grid 并避免间距叠加。

如何用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() 组合才是健壮写法：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

/* 移动端默认单列 */
.container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
<p>/<em> 平板：6列 </em>/
@media (min-width: 768px) {
.container {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}</p><p>/<em> 桌面：12列 </em>/
@media (min-width: 1024px) {
.container {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
}</p>

断点值要和业务一致（比如 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; }
<p>@media (min-width: 768px) {
.grid<strong>col--md-6 { grid-column: span 6; }
.grid</strong>col--md-4 { grid-column: span 4; }
}</p>

grid-column: span 4 是相对定位：从当前自动分配的起始线往后跨 4 条线
grid-column: 2 / 6 是绝对定位：强制从第 2 线开始、到第 6 线结束——适合固定区域（如页眉横跨全宽），不适合动态栅格
偏移（offset）用 grid-column-start: 3 实现，等价于 Bootstrap 的 offset-2（跳过前 2 列）