Grid中fr单位实现主内容自适应剩余空间，边栏固定用240px、弹性用minmax(200px,300px)，需防内容溢出加break-word，响应式用媒体查询重设grid-template-columns，IE11不支持fr需降级为Flex。
Grid布局中用fr分配主内容与边栏的宽度比例
直接用grid-template-columns定义两列，边栏固定或弹性均可，但“自适应剩余空间”本质是让主区域吃掉所有没被显式占掉的宽度。比如边栏设为240px，主区用1fr，那它就自动撑满剩下的全部空间——不是按百分比算，而是按可用空间动态分配。
-
fr单位只在Grid容器内生效，不能用在Flex或普通块级布局里 - 如果边栏也要自适应（比如最小
200px、最大300px），得配合minmax(200px, 300px)，否则单写1fr会让它和主区平分空间 - 别混用
px和fr时漏掉单位，比如写成grid-template-columns: 240 1fr会失效——必须是240px
避免fr被内容撑爆导致横向滚动
默认情况下，Grid项内容过长（比如超长URL、无换行英文）会突破fr设定的逻辑宽度，触发容器溢出。这不是fr错了，而是文本流没受控。
- 主内容区加
overflow-wrap: break-word或word-break: break-word，强制断行 - 边栏若含长单词或标签，也需同样处理，否则可能把整行顶宽，间接压缩主区显示空间
- 别依赖
white-space: nowrap来“保持一行”，它和fr自适应目标冲突
响应式切换：从双栏退化为单栏时Grid怎么写
媒体查询里重设grid-template-columns是最干净的做法。重点不是删Grid，而是改列数和fr分配逻辑——比如小屏下边栏收进display: none前，先让它占满整行。
- 推荐写法：
@media (max-width: 768px) { grid-template-columns: 1fr; }，此时原边栏和主区都变成单列，顺序由grid-area或源顺序决定 - 如果想小屏时边栏移到底部，用
grid-template-areas配合grid-area更可控，比单纯靠order少踩坑 - 别在媒体查询里只改某一项的
width，Grid容器的列定义没变，容易出现错位或空白
IE11兼容性问题：fr单位根本不可用
IE11不支持fr，连带minmax()、auto-fit等现代语法全挂。如果项目还需兼容，要么放弃Grid用Float/Flex模拟，要么用PostCSS插件转译——但注意：转译无法真正实现fr语义，只能降级为固定比例或JS计算。
立即学习“前端免费学习笔记（深入）”；
- 检查Can I Use数据，确认目标用户是否真有IE11流量；没有就别为它加polyfill负担
- 若必须兼容，Flex方案更实际：边栏
flex: 0 0 240px，主区flex: 1，效果接近且IE10+全支持 - 用
@supports (display: grid)做特性检测再加载Grid样式，比UA判断更可靠
真正麻烦的不是怎么写fr，而是当边栏里嵌了绝对定位元素、或主区用了transform缩放时，Grid的隐式尺寸计算会悄悄失准——这种时候得手动加min-width或max-width锚定边界。
