最推荐用 display: grid 实现响应式多板块，大屏用 grid-template-columns: repeat(3, 1fr)，小屏 @media 切换为 1fr，配合 gap 和 minmax() 控制间距与高度，动态内容用 grid-auto-flow，固定区域用 grid-template-areas，IE11 用 @supports 降级为 Flex。
用 grid 布局实现响应式多板块，别碰 float 或 inline-block
直接上 display: grid，配合 grid-template-columns 和 @media 切换列数，是目前最可控、语义最清晰的方案。老式浮动或行内块在小屏下容易错位、撑开容器，且难以统一控制间隙。
关键不是“怎么写”，而是“怎么切”。大屏常见 3–4 列，小屏必须退到 1 列（极少数场景可保留 2 列），中间不用过渡列数——浏览器重排压力小，视觉也干净。
-
grid-template-columns: repeat(3, 1fr)用于桌面端，三等分 - 小屏用
@media (max-width: 768px)覆盖为grid-template-columns: 1fr - 用
gap统一控制板块间距，别用margin—— 后者在网格中易引发塌陷或重复留白
grid-auto-flow 和 grid-template-areas 选哪个？看内容是否固定区域
如果板块顺序固定、区域命名明确（比如始终有 header、sidebar、main），优先用 grid-template-areas + area 命名。它让 HTML 结构和布局解耦，小屏时只需重定义 grid-template-areas 字符串，不改 HTML。
如果板块数量动态（如后台生成的卡片列表），就用 grid-auto-flow: row，靠 grid-column 控制跨列，更灵活。
立即学习“前端免费学习笔记（深入）”；
- 固定区域示例：
grid-template-areas: "header header" "sidebar main"→ 小屏改成"header" "sidebar" "main" - 动态卡片场景：避免硬写
area，改用grid-column: span 2标记重要卡片，其余自动填充 - 注意：
grid-area值不能含空格或特殊字符，my-header可以，my header会失效
移动端触摸体验差？多半是 minmax() 没设底线
只写 1fr 在小屏下会让板块高度被内容撑得参差不齐，尤其图文混排时，按钮或标题对不齐，用户滑动时视觉跳变明显。必须用 minmax(min-content, 1fr) 或 minmax(200px, 1fr) 给每格设个最小高度锚点。
-
grid-template-rows: repeat(auto-fit, minmax(250px, 1fr))))是安全起点 - 避免
minmax(0, 1fr)—— 0 会让 Safari 忽略该规则，导致高度塌缩 - 若板块含图片，给
<img alt="编辑网页中用HTML实现多板块网格在大屏和小屏下的无缝转换" >加width: 100%; height: auto;，否则minmax可能被图片原始尺寸破坏
IE11 兼容？别硬扛，加降级兜底就行
真要支持 IE11，grid 本身可用，但 gap、auto-fit、minmax 都不支持。与其写一堆 hack，不如用 @supports 分离逻辑：
section { display: flex; flex-wrap: wrap; }
@supports (display: grid) {
section { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}Flex 降级只要保证子项设 flex-basis: calc(100% / 3 - 0.666rem)（减去间隙均摊值），就能模拟三列。别试图让 IE11 渲染出和 Chrome 一模一样的网格——它做不到，也不该由你承担这个成本。
真正容易被忽略的是：当用 grid-column-start 显式定位时，IE11 会把未声明位置的元素堆在左上角，必须给每个板块都指定 grid-column，否则布局完全错乱。
