最稳方案是用grid-template-areas配合grid-template-columns实现响应式侧边栏：桌面端设"main sidebar"与1fr minmax(240px,280px)，小屏改"main""sidebar"并设1fr+display:none隐藏侧边栏，确保区域名大小写、空格、引号完全匹配。
直接用 grid-template-columns 配合 grid-template-areas 最稳，别硬套 grid-column 或 span all —— 后者根本不存在，浏览器会忽略。
怎么写 grid-template-areas 实现桌面端左右分栏
语义清晰、响应式切换成本最低。主内容区和侧边推荐位在桌面端并排，在小屏下自动堆叠。
- HTML 中给元素加
grid-area值，比如<main class="article-list" style="grid-area: main"></main>和<aside class="recommend" style="grid-area: sidebar"></aside> - CSS 容器设
display: grid，桌面端写grid-template-areas: "main sidebar"，列宽用grid-template-columns: 1fr minmax(240px, 280px) - 注意：引号内空格分隔区域名，不能换行或加多余空格，否则整个声明失效
- 如果侧边推荐位含图片或卡片，建议额外加
align-self: start，避免因内容高度不一致导致底部错位
为什么 grid-row: 1 / span all 是错的
这个写法不会生效，CSS Grid 规范里没有 span all。你看到的“正常显示”，大概率是隐式网格撑开或浏览器容错渲染，换个环境就崩。
- 合法跨满所有行的写法只有三种：
grid-row: 1 / -1（推荐，但需父容器有明确grid-template-rows或足够高度）、grid-row: 1 / 99（不推荐，维护性差）、或命名线方案（如grid-template-rows: [sidebar-start] 1fr [sidebar-end]+grid-row: sidebar-start / sidebar-end） - 若侧边栏只是视觉上“通高”，实际内容不多，更稳妥的做法是不设
grid-row，靠align-self: stretch（默认值）+ 父容器min-height: 100vh拉齐 - 一旦用了
overflow: hidden又没控好内部 padding/font-size，内容会被无声裁剪——这不是布局问题，是尺寸失配
移动端如何安全隐藏侧边推荐位
只改 grid-template-columns: 1fr 不够，DOM 还在网格中，可能撑高容器或触发横向滚动条。
- 必须同步加
.recommend { display: none; }，彻底移除渲染占位 - 别用
visibility: hidden：它仍参与布局计算，且对键盘焦点和屏幕阅读器不友好 - 如果要做汉堡菜单唤出效果，改用
position: fixed+transform: translateX(-100%)，同时确保父容器有overflow: hidden - 媒体查询里切回桌面布局时，记得把
display: none改回来，别漏掉
最易被忽略的是 grid-template-areas 的引号格式和大小写一致性——多一个空格、少一个引号、大小写不匹配，整块布局就退化成默认文档流。调试时先检查控制台是否报 “Invalid property value” 类错误，再查 HTML 元素的 grid-area 值是否和 CSS 里完全一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
