CSS Grid 通过 grid-template-columns 明确设定侧边栏固定宽度（如 240px 或 minmax(200px, 240px)）和主内容区 1fr 自适应，彻底解耦布局与内容，避免浮动、flex 或百分比导致的宽度异常，并支持 media query 无缝响应式切换。
侧边栏宽度不固定，往往是因为用了浮动、flex的自动收缩行为，或百分比/内容撑开导致响应异常。用 CSS Grid 定义固定列宽，确实更可控、更稳定——关键是把“侧边栏”设为显式固定尺寸，主内容区用 fr 或 auto 自适应，避免被内容反向影响。
用 grid-template-columns 明确划分列宽
在容器上设置 display: grid，并通过 grid-template-columns 直接定义侧边栏为固定像素（如 240px）或最小宽度（如 minmax(200px, 240px)），主区域用 1fr 占满剩余空间：
-
grid-template-columns: 240px 1fr;→ 侧边栏永远 240px，主内容弹性伸缩 -
grid-template-columns: minmax(200px, 240px) 1fr;→ 侧边栏最小 200px、最大 240px，兼顾紧凑与可读性 - 避免写成
auto 1fr或fit-content(240px) 1fr，它们仍可能被内部文字或图片撑开
配合 grid-area 控制区域语义和顺序
给侧边栏和主内容分别命名（如 sidebar 和 main），再用 grid-template-areas 布局，既提升可维护性，也方便后续加 header/footer：
grid-template-areas: "sidebar main";-
sidebar { grid-area: sidebar; width: 240px; }（注意：width 不影响 grid 划分，真正起效的是grid-template-columns） - 这样即使 HTML 中 sidebar 写在 main 后面，视觉顺序也不会错乱
响应式时用 media query 重定义列结构
小屏下侧边栏常需收起或移到顶部，这时不要靠 JS 切类名，直接用媒体查询切换 grid 列配置：
立即学习“前端免费学习笔记（深入）”；
- 桌面端：
grid-template-columns: 240px 1fr; - 移动端：
grid-template-columns: 1fr;+grid-template-areas: "sidebar" "main"; - 无需隐藏/显示元素，仅靠 grid 重排即可完成布局切换，性能好、逻辑清
基本上就这些。Grid 的优势不在炫技，而在把“谁占多少空间”这件事从内容流里彻底解耦——侧边栏宽不宽，只由你写的 grid-template-columns 决定，跟里面放几个按钮、有没有长单词，完全无关。
