最稳起步写法是 grid-template-columns: 250px 1fr，但需配合媒体查询实现响应式：小屏（如 max-width: 768px）改用 grid-template-columns: 1fr 并通过类名切换+transform动画控制侧边栏显隐，同时确保侧边栏设 min-width: 250px 防压缩变形。
grid-template-columns 怎么写才能让侧边栏和主内容自适应
直接说结论：用 grid-template-columns: 250px 1fr 是最稳的起步写法，但真要响应式，不能只靠这行——它只管“怎么分”，不管“什么时候分”。250px 在小屏上会撑破容器，1fr 也没法自动退化为垂直堆叠。
常见错误现象：grid-template-columns: 250px 1fr 写完发现手机上看侧边栏被压缩成一条细线、文字溢出，或者搜索框错位；更隐蔽的是，在 iPad 横屏（比如 1024px 宽）下左右并排还行，但竖屏（768px）就该收侧边栏了，可样式没变。
- 用
minmax(250px, 30%)替代固定像素，让侧边栏在窄屏下按比例收缩，但别低于250px——否则搜索输入框太窄，用户难操作 - 主内容列必须用
1fr，不能写auto或固定值，否则无法弹性占满剩余空间 - 如果侧边栏里有搜索框、筛选项等交互元素，建议给它加
min-width: 250px，防止 Grid 自动压缩时把输入框压变形
怎么让侧边栏在小屏上自动收进汉堡菜单
Grid 本身不控制“显隐”，它只负责布局。想收侧边栏，得靠媒体查询 + 类名切换 + grid-template-columns 动态重定义。
使用场景：移动端优先项目，或需要兼顾桌面/平板/手机三端的管理后台搜索页。别指望靠 display: none 简单隐藏侧边栏——那样会破坏 Grid 结构，主内容不会自动拉宽，留出空白。
立即学习“前端免费学习笔记（深入）”；
- 默认写两列：
grid-template-columns: 250px 1fr - 在
@media (max-width: 768px)里改成：grid-template-columns: 1fr，同时把侧边栏设为grid-column: 1，让它独占第一行 - 配合 JS 控制一个
.sidebar--collapsed类，用transform: translateX(-100%)实现滑入滑出动画，而不是靠visibility或opacity做假隐藏
search 输入框在 Grid 分栏里总对不齐怎么办
不是 Grid 的锅，是默认 box-sizing 和内边距在不同列里渲染不一致导致的。尤其当侧边栏用了 padding，而搜索框又没重置 width，就会看起来“缩进多了一截”。
性能影响不大，但视觉割裂感强，用户会觉得页面“没调好”。兼容性上，所有现代浏览器都支持，但老版 Safari（minmax() 里的百分比解析略有偏差。
- 给搜索框父容器加
box-sizing: border-box，确保padding不撑宽 - 搜索框自身设
width: 100%，且去掉任何margin-left或margin-right——Grid 列之间间隙应由gap统一控制 - 如果侧边栏用了
padding: 1rem，搜索框就别再额外套一层padding，直接用margin-top控制上下间距
为什么用 Grid 而不用 Flex 做这个布局
Flex 也能做两栏，但它本质是一维布局，强行让侧边栏“固定宽度”+ 主内容“自适应”，在响应式断点切换时容易出现回流抖动，尤其当侧边栏里有动态高度的筛选项时。
Grid 的二维能力在这里是刚需：你既要控制列宽（x轴），又要确保搜索区域和结果列表在各自轨道里不互相挤压（y轴）。Flex 没法天然约束“某一块永远在左边”。
- Flex 下改列顺序得靠
order，但小屏折叠后想把侧边栏提到顶部，就得同时改flex-direction和多个order值，逻辑绕 - Grid 可以用
grid-template-areas配合媒体查询，一套代码描述两种布局意图，比如 desktop:"sidebar main"，mobile:"sidebar" "main" - 别为了“用新技术”硬上 Grid —— 如果项目还要支持 IE11，那就老老实实用 float 或 JS 插件，Grid 的兼容性底线是 Edge 16+
真正麻烦的不是写几行 grid-template-columns，而是想清楚：侧边栏到底要不要在 768px–1024px 区间保持可见？它的最小安全宽度是多少？搜索框获得焦点时，是否要临时放大侧边栏？这些决策比语法更重要。
