优先用 css grid 实现两行三列：设 display: grid、grid-template-rows: 1fr 1fr、grid-template-columns: repeat(3, 1fr)、gap；flexbox 需加 width 和 flex-basis 限制；保持自然 dom 行序，ie 兼容需降级并手动处理 gap。
用 CSS Grid 实现两行三列最稳
直接上 display: grid，别碰 float 或老式 inline-block 布局——兼容性差、换行逻辑反直觉、响应式一加就崩。
关键不是“怎么排”，而是“怎么定义容器行为”：
-
grid-template-rows: 1fr 1fr明确限定两行，避免内容撑高后自动新增第三行 -
grid-template-columns: repeat(3, 1fr)比写死33.33%更可靠，能响应内容伸缩 - 子元素不用设
float、display或position，Grid 容器会自动按顺序填入
示例代码：
.container {
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}Flexbox 能不能凑合用？
能，但得加限制条件，否则极易变成“两行不固定、三列不保底”。
立即学习“前端免费学习笔记（深入）”；
常见翻车点：
- 只设
flex-wrap: wrap+width: 33.33%：当子项内容长度不均时，第二行可能只出现 1–2 个项 - 没设
flex-basis或用min-width干预：小屏下三项挤成一行，大屏下空出第四列位置 -
justify-content: space-between在两行时会让第二行对齐失效
如果非要用 Flexbox，必须加这三句：
.container {
display: flex;
flex-wrap: wrap;
width: calc(3 * (100% / 3)); /* 强制容器宽度为三列基准 */
}
.item {
flex: 0 0 calc(100% / 3); /* 不放大、不缩小、基础宽度为 1/3 */
}HTML 结构有没有讲究？
有。Grid 和 Flex 都依赖 DOM 顺序，但很多人忽略语义和可访问性。
JTBC CMS(5.0) 是一款基于PHP和MySQL的内容管理系统原生全栈开发框架，开源协议为AGPLv3，没有任何附加条款。系统可以通过命令行一键安装，源码方面不基于任何第三方框架，不使用任何脚手架，仅依赖一些常见的第三方类库如图表组件等，您只需要了解最基本的前端知识就能很敏捷的进行二次开发，同时我们对于常见的前端功能做了Web Component方式的封装，即便是您仅了解HTML/CSS也
错误写法：
<div class="container"> <div>A</div> <div>B</div> <div>C</div> <div>D</div> <div>E</div> <div>F</div> </div>
看着没问题，但若后续要支持键盘 Tab 导航或屏幕阅读器，顺序就得和视觉一致。如果业务要求“第一列从上到下是 A→D”，那就得改结构：
- 要么用
grid-auto-flow: column+ 调整grid-template-rows，但可读性下降 - 要么老老实实按列组织 HTML：
A、D、B、E、C、F—— 这种顺序在 Grid 中需配合grid-column手动定位，维护成本高
结论：优先保持自然 DOM 顺序（行优先），视觉错位靠 CSS 解决，别为了“看起来像列布局”打乱 HTML。
IE 兼容怎么办？
IE10–11 对 Grid 支持极弱（仅旧语法 display: -ms-grid），且不支持 gap、repeat()、fr 单位。
如果真要兼容 IE：
- 放弃 Grid，退回 Flexbox +
calc(33.33%)+box-sizing: border-box - 用 Autoprefixer 编译时加
ie: 11目标，它会自动补-ms-前缀（但仅限基础属性） -
gap必须手写margin模拟，且注意最后一行子项的多余 margin
现代项目里，IE 兼容其实是取舍问题：加一层兼容代码，换来的是更难 debug 的布局逻辑和更长的构建时间。很多团队现在直接用 @supports (display: grid) 做特性检测，IE 用户看到降级版布局，也比全站崩掉强。
真正容易被忽略的是：两行三列背后常藏着“动态数据渲染”，比如从 API 拿回 5 条数据，你得决定第 6 个空位要不要占位、要不要隐藏、或者让 Grid 自动塌陷——这些细节不写死 CSS 就没法稳定表现。
