常见写法为grid-template-columns: 240px 1fr;，实现左固定右弹性；需父容器设display: grid;，子项避免脱离文档流；响应式用媒体查询切换，如移动端改为1fr单列。
grid-template-columns 设置两栏宽度的常见写法
直接用 grid-template-columns 定义两栏，最常用的是固定值 + 自适应组合，比如左侧导航栏 240px、右侧内容区占满剩余空间。关键不是“能不能分两栏”，而是“怎么分才不踩坑”。
-
grid-template-columns: 240px 1fr;—— 左固定右弹性，1fr会扣除栅格间隙（gap）后分配剩余空间 -
grid-template-columns: 20% 80%;—— 百分比基于容器宽度，但子元素若设了min-width可能撑破布局 -
grid-template-columns: minmax(200px, 300px) 1fr;—— 左栏最小 200px、最大 300px，超出部分由右栏吸收
为什么设置了 grid-template-columns 却没显示两栏？
常见原因是父容器没启用 Grid 布局，或者子元素被其他 CSS 干扰。Grid 是“主动开启”的，不是自动生效。
- 必须给父容器显式设置
display: grid;，只写grid-template-columns没用 - 子元素如果写了
float、position: absolute或display: inline-block，会脱离 Grid 流，导致不参与列分配 - 若只有一两个子元素，但期望它们分别占据左右栏，得配合
grid-column显式指定位置，例如：grid-column: 1;和grid-column: 2;
响应式两栏布局中 grid-template-columns 怎么切换？
用媒体查询重置 grid-template-columns 最稳妥，避免依赖 auto-fit 或 auto-fill 在简单两栏场景下引入不必要的复杂度。
- 桌面端：
grid-template-columns: 240px 1fr; - 移动端（
max-width: 768px）：改用grid-template-columns: 1fr;实现单栏堆叠 - 注意：不要在媒体查询里只改
grid-template-columns而忽略gap或子项margin，它们可能在窄屏下造成溢出
和 Flex 两栏相比，Grid 的实际差异在哪？
Grid 真正的优势不在“分两栏”这个动作本身，而在于它天然支持二维控制——你随时可以加行、跨行、嵌套子网格，而 Flex 是一维的。但这也意味着，如果只是简单左右分栏且无后续扩展需求，Flex 往往更轻量、兼容性更好（IE11 对 Grid 支持有限）。
立即学习“前端免费学习笔记（深入）”；
- Grid 允许子项独立定位，比如右栏内容想从第二行开始，只需加
grid-row: 2; - Flex 下实现等高两栏靠
align-items: stretch，Grid 下默认就等高，无需额外设置 - 但 Grid 的
fr单位在旧版 Safari（fr 值（如0.5fr）有渲染误差，建议优先用整数或百分比
grid-template-columns 会受外层 grid-column 范围限制，而不是整个容器宽度。 
