用 grid-template-columns 配合 fr 单位实现弹性三栏的核心是使用 1fr 1fr 1fr 分配剩余空间，整体居中需靠 justify-content: center 或 margin: 0 auto 控制，避免误用 justify-items；响应式下推荐 repeat(auto-fit, minmax(300px, 1fr)) 动态调整列数，并优先使用 gap 而非 padding/margin 控制间距。
用 grid-template-columns 配合 fr 单位实现弹性三栏
不设固定宽度的核心是放弃 px 或 %，改用 fr（fraction）单位分配剩余空间。三栏等宽就写 1fr 1fr 1fr，但这样默认会撑满整个容器——居中需要额外控制容器自身宽度或内容分布方式。
常见错误是只写 display: grid 却忘了给父容器设 justify-items: center 或对子项单独处理，结果三栏左对齐或溢出。
-
grid-template-columns: 1fr 1fr 1fr确保三栏等分可用空间，不依赖内容宽度 - 若要整体居中（而非每栏居中），需让 grid 容器本身不占满父容器宽度，例如加
max-width: 1200px+margin: 0 auto - 如果父容器宽度不定（比如响应式场景），更稳妥的做法是用
justify-content: center让整行 grid 轨道居中
避免 justify-items: center 导致内容错位
这个属性会让每个网格项的内容（比如文字、图片）在各自格子内水平居中，不是让三栏整体居中。很多人误以为设了它就能“三栏居中”，结果发现只是每栏里的文字居中了，三栏本身还是贴左的。
真正控制三栏位置的是 justify-content（作用于整条轨道线）和 margin（作用于 grid 容器自身）。
- 用
justify-content: center时，三栏会作为一个整体在父容器中居中，前提是父容器有足够宽度 - 如果父容器太窄（比如手机屏），
1fr 1fr 1fr会压缩到最小内容宽度，此时justify-content可能失效——得配合minmax()限定最小列宽 - 示例：
grid-template-columns: repeat(3, minmax(250px, 1fr))，既防过窄，又保弹性
响应式断点下如何保持三栏结构不坍缩
纯 1fr 1fr 1fr 在小屏上容易把三栏压成极窄甚至换行（尤其内容多时）。Grid 默认不换行，所以必须显式控制。
关键不是删掉一栏，而是用 repeat() + auto-fit / auto-fill 动态调整列数，同时保持“尽可能三栏”的意图。
- 推荐写法：
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) - 这句意思是：每列至少 300px，最多占 1fr；容器够宽就铺满三列，不够就自动减少列数（如变两栏或一栏）
- 想强制三栏不减少？那就不能用
auto-fit，改回1fr 1fr 1fr，并配合媒体查询限制最小容器宽度 - 注意：
auto-fit和auto-fill行为不同——auto-fit会合并空轨道，auto-fill保留空轨道，通常选前者
为什么不用 gap 而用 padding 控制栏间距容易出问题
gap 是 Grid 原生间距控制，安全可靠；而用 padding 或 margin 模拟间隙，会导致计算混乱——尤其是居中时，左右 padding 会干扰 justify-content: center 的基准点。
典型陷阱：给每个 grid item 加 margin-right 实现间隔，最后一栏多出空白，整体偏移。
- 始终优先用
gap: 20px（或column-gap/row-gap）控制间距 -
gap不影响 track 尺寸计算，也不参与 justify/align 对齐的测量范围 - 如果设计要求第一栏左边、最后一栏右边不留空，
gap依然适用——它只在栏之间生效，不会在最外侧产生额外空白
justify-content 的生效前提：它只在 grid 容器的**内联方向上有富余空间**时才起作用。如果 grid 容器宽度刚好等于三栏总宽（比如子项内容撑开后无多余空间），居中就失效——这时得靠容器自身的 margin: 0 auto 或外层 wrapper 控制。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
