HTML5无内置栅格系统，需用CSS Grid（如repeat(auto-fit, minmax(280px, 1fr))）或Flex实现响应式布局；断点应基于内容变形而非设备尺寸；子项跨列必须用grid-column而非class模拟。
HTML5 本身不提供栅格系统，所谓“HTML5 布局代码栅格系统自定规则”，实际是用 display: grid 或 display: flex 手动实现响应式列宽、间距与断点控制——不是靠框架，而是靠 CSS 自定义。
grid-template-columns 配合 minmax() 实现流式等宽列
这是最常用的自定义栅格起点。固定列数（如 12 列）容易僵化，而用 minmax() + repeat(auto-fit) 能让容器自动填充可用空间：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
}
说明：每列最小 280px，最大均分剩余空间；容器变窄时自动减少列数。注意 auto-fit 和 auto-fill 行为不同——auto-fit 会合并空轨道，auto-fill 保留空占位，通常选前者。
- 若需兼容 IE，此写法不可用，得降级为
flex+calc() - 280px 是移动端常见触控最小宽度，低于它易误点，不建议设成 200px 或更小
-
gap不影响子元素margin，但会叠加——别在子项上同时写margin和依赖gap对齐
@media 中断点应基于内容而非设备尺寸
自定义栅格的断点不该写成 @media (max-width: 768px) 这类“iPad 假设”，而应观察内容何时挤叠变形。比如标题换行、按钮被截断、图片比例失真时，才是加断点的信号：
立即学习“前端免费学习笔记（深入）”；
.container {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
@media (min-width: 640px) {
.container {
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}
}
@media (min-width: 960px) {
.container {
grid-template-columns: repeat(3, 1fr);
}
}
说明：断点值来自真实内容撑开需求，不是查“设备像素表”。320px → 360px → 固定 3 列，是渐进增强过程。避免在同一个断点里同时改 grid-template-columns 和 gap，容易视觉跳变。
- 不要用
em或rem写媒体查询宽度——它们受字体缩放影响，导致断点错位 - 若用 JS 动态读取
getComputedStyle获取栅格状态，注意gridTemplateColumns返回的是解析后字符串，不是原始 CSS 值
子元素跨列必须用 grid-column，不能靠 class 模拟
自定义栅格中，要让某个卡片横跨两列，必须用 grid-column: span 2，而不是加个 class="col-span-2" 再靠 JS 或冗余 CSS 模拟：
.card-wide {
grid-column: span 2;
}
.card-full {
grid-column: 1 / -1;
}
说明：1 / -1 表示从第一列线到最后一列线，比 span 12 更可靠（尤其列数动态时）。如果父容器用了 auto-fit，子项 span 值超过当前实际列数，浏览器会自动限制为最大可跨数，不会报错但可能不符合预期。
- 避免在子项上写
width: 50%同时又用grid-column——CSS 宽度声明会被 Grid 布局忽略，徒增维护成本 -
grid-column-start和grid-column-end可以用数值或命名线，但命名线需在父容器显式定义grid-template-areas或grid-template-columns中带名称，否则无效
真正难的不是写出几行 grid 代码，而是判断哪些区域该用 grid、哪些该交给 flex 或普通文档流。比如导航栏内联项目对齐用 flex 更自然，而首页多卡片瀑布布局才值得上 grid。自定义规则的前提，是清楚每一处“为什么不能用默认流”。
