结论是：用grid-template-columns: minmax(300px, 1fr) 1fr minmax(300px, 1fr)配合中间列max-width: 800px和margin: 0 auto，才能实现内容区宽度可控、留白响应式收缩的真正稳健布局；单纯1fr无上限，fit-content易塌缩，auto-fit破坏线性阅读流。
直接说结论：用 grid-template-columns: minmax(300px, 1fr) 1fr minmax(300px, 1fr) 三列布局，中间列放文章主体并设 max-width: 800px，左右两列留白自适应收缩——这才是真正可控的“内容区最大宽度 + 响应式留白”组合，不是靠 max-content 或单纯 1fr。
为什么 grid-template-columns: 1fr 不适合文章详情页
它会让整行只有一列、占满容器，但无法限制内容实际渲染宽度。用户在大屏上看到超宽段落（比如长代码块、URL），阅读体验崩坏；小屏又可能因未设最小约束导致文字挤成窄条。更关键的是：1fr 不等于“最多 800px”，它只是“剩余空间均分”，没有上限语义。
常见错误现象：
- 写了
grid-template-columns: 1fr，结果文章区在 2560px 屏幕上拉到 2400px 宽，行高失衡、字距发散 - 加了
max-width到子元素上，但父网格轨道仍按1fr分配，左右无留白，视觉压迫感强 - 误用
fit-content(800px)单独一列，结果内容短时列宽塌缩到几像素，排版断裂
正确做法：用 minmax() 控制轨道，用 max-width 控制内容
核心是把“内容区域”放进一个有弹性和边界的轨道里，而不是靠子元素硬撑或硬裁。
推荐结构：
.article-layout {
display: grid;
grid-template-columns: minmax(300px, 1fr) 1fr minmax(300px, 1fr);
gap: 20px;
}
.article-main {
grid-column: 2 / -2;
max-width: 800px;
margin: 0 auto;
}
说明：
-
minmax(300px, 1fr)左右两列：最小 300px，大屏时随容器扩展，但不会无限宽；小屏下自动压缩，为中间列让出空间 - 中间列写
1fr而非minmax(600px, 1fr)，避免与max-width冲突；它的作用只是“承接内容”，实际宽度由max-width和margin: 0 auto主导 -
grid-column: 2 / -2确保内容跨中列，并避开最右轨道（-2 是倒数第二条线），防止右侧留白被吞掉
容易踩的坑：auto-fit / auto-fill 在这里没用
文章详情页是单列主导结构，不是卡片流。用 repeat(auto-fit, minmax(400px, 1fr))) 反而会把标题、正文、图片、评论强行切分成多列，破坏语义流和阅读顺序。
除非你做的是「多栏新闻摘要页」，否则别碰 auto-fit。它适合网格项彼此独立的场景（如商品列表），不适合线性长文。
另外注意：
- 如果用了
grid-auto-flow: column，grid-template-columns对主内容列的控制会失效——浏览器改按内容高度生成列，完全不可控 - 不要给
.article-main设width: 100%或flex: 1，这会覆盖max-width的约束 - Firefox 116 及更早版本不支持
minmax()中的1fr作为最大值（需降级为max-content+ 显式max-width）
复杂点在于图文混排时的宽度继承
图片、<pre class="brush:php;toolbar:false;"></pre>、表格等元素默认 width: auto，会突破 max-width: 800px。必须额外处理：
img { max-width: 100%; height: auto; }-
pre { overflow-x: auto; }（防止横向滚动条被截断） - 表格加
table { width: 100%; table-layout: fixed; }，再对td设word-break: break-word
这些不是 Grid 的问题，但它们会直接破坏你精心设计的宽度控制逻辑——最容易被忽略，也最难调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
