应使用 display: grid 或 display: flex 布局而非 <table>，因后者语义错误、响应式差、可访问性低；Grid 适合三栏主结构，Flex 用于组件级对齐，配合 min-width: 0 和 overflow-wrap: break-word 防撑破布局。
直接用 display: grid 或 display: flex 布局，别碰 <table> 做主结构——它语义错、响应式难、屏幕阅读器读不出来。
为什么不能用 <table> 做 Wiki 页面主布局
Wiki 页面本质是「语义化文档流」：标题、段落、列表、引用、代码块、侧边目录、编辑按钮……这些不是二维数据关系，而是内容层级与交互意图。用 <table> 强行套格子，会导致：
-
<th>和<td>被屏幕阅读器误读为“表格数据”，破坏可访问性 - 响应式断点一加，嵌套
<tr><td>就塌缩错位，连colspan都救不回来 - SEO 抓取时无法识别正文主体，
<article>和<main>语义丢失 - 后续想加 toc（目录）悬浮、编辑按钮右上角定位、历史版本标签栏——全得靠
position: absolute补丁，越补越脆
display: grid 适合 Wiki 的三栏经典结构
Wiki 页面常见布局是：左侧导航/目录 + 中间主内容 + 右侧元信息（如最后编辑时间、分类标签）。Grid 天然适配这种二维划分，且无需浮动或清除。
关键写法不是堆 grid-template-areas，而是用线性列定义：
立即学习“前端免费学习笔记（深入）”；
article {
display: grid;
grid-template-columns: 240px 1fr 280px;
gap: 16px;
}-
240px给左侧导航（固定宽，不随窗口缩放） -
1fr是主内容区（自动占剩余空间，文本流自然换行） -
280px给右侧元信息（避免过宽撑开，也方便@media下收起） -
gap替代margin，避免父子外边距合并导致的间距错乱
注意：IE11 不支持 Grid，若需兼容，得 fallback 到 Flex；但现代 Wiki 系统（如 MediaWiki 1.35+）默认已弃用 IE 支持。
display: flex 用于单行/单列组件级布局
Grid 管整体区域划分，Flex 管局部对齐——比如 Wiki 页面顶部的「页面标题 + 编辑按钮 + 历史按钮」一行内分布：
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}- 别只给子元素设
margin-left: auto来推右，那样在 flex 容器里语义弱、维护难 -
align-items: center确保按钮和 H1 垂直居中对齐，不用算line-height或padding-top - 如果编辑按钮在小屏要下移，加
flex-wrap: wrap+order控制重排顺序，比 media query 写两套更轻量
min-width: 0 是 Wiki 内容区最常漏掉的一行 CSS
Wiki 正文常含长 URL、代码片段或未换行的英文单词，而 Flex/Grid 默认不截断子元素。结果就是：1fr 区域被一个超长链接撑破，横向滚动条意外出现，右侧栏被挤到下一行。
修复只需一行：
.main-content {
min-width: 0; /* 触发 shrink-to-fit 行为 */
overflow-wrap: break-word;
}- 没这句，
flex: 1或1fr在遇到不可折行内容时会失效 -
overflow-wrap: break-word是安全的断行策略，比word-break: break-all更尊重语义 - 这个组合在 MDN、Wikipedia、GitBook 等真实 Wiki 类站点中是标配，不是“可选优化”
真正麻烦的从来不是怎么画出三栏，而是让长文本、代码块、引用嵌套在不破坏布局的前提下，老老实实待在自己的格子里。
