用 grid-template-areas 按语义分块布局，移动端优先单列，侧边栏依功能决定隐藏或 sticky 定位，慎用 fr 与 minmax() 混合及 dense 流，文字响应靠 clamp()，图片需约束宽高。
用 display: grid 划分主体区域时，别硬套 12 栅格
Grid 不是 Bootstrap，强行按 12 列切会导致断点混乱、内容挤压。真正该做的是按内容语义分块：主内容区、侧边栏、导航栏、页脚——每块独立响应，而非统一栅格对齐。
实操建议：
- 用
grid-template-areas命名区域（如"header header" "nav main" "footer footer"），比纯列数更易维护 - 在移动端优先用单列布局：
grid-template-areas: "header" "nav" "main" "footer" - 避免给
grid-column写死span 3这类值，改用grid-area: main配合媒体查询重定义布局 - 注意
grid-gap在 Safari 旧版本中需加-webkit-前缀（iOS 15.4 之前）
侧边栏在小屏下隐藏还是折叠？看它是否承载关键功能
如果侧边栏里是搜索框、分类标签或最近文章，直接 display: none 会砍掉用户路径；但若只是社交链接或广告位，隐藏更干净。
实操建议：
- 用
@media (max-width: 768px)控制grid-template-areas，把侧边栏从布局中移除，而非仅视觉隐藏 - 若需保留功能，改用
position: sticky+top: 1rem让侧边栏在滚动时固定在视口右上角（注意 z-index 层级） - 别用
transform: translateX()做“抽屉式”侧边栏——Grid 容器内元素 transform 可能触发重排，影响滚动性能
minmax() 和 fr 混用时，宽度计算容易出错
fr 是剩余空间分配单位，minmax(300px, 1fr) 表示“至少 300px，最多占 1 份剩余空间”，但当容器太窄时，1fr 可能小于 300px，导致实际取到下限——这和直觉相反。
实操建议：
- 主内容区推荐
minmax(0, 4fr)（不是1fr），侧边栏用minmax(280px, 1fr)，这样在窄屏下主内容仍能撑开 - 避免写
1fr 2fr 1fr这类比例组合——当某列内容超长时，Grid 会优先压缩有minmax()的列，没约束的列反而溢出 - 用
grid-auto-flow: dense填补空隙？慎用。博客主页通常有明确阅读流，自动重排会打乱语义顺序
字体、行高、间距的响应式不是靠 media query 硬切
Grid 布局本身不处理文字渲染，但主体区域的可读性高度依赖文字层级是否随容器缩放。用 rem 或 em 配合 clamp() 才算真响应。
实操建议：
- 标题字号用
font-size: clamp(1.25rem, 4vw, 2.5rem)，比写三段 media query 更轻量 - 正文行高别设死
line-height: 1.6，改用line-height: clamp(1.4, 5vw, 1.8)，小屏紧凑、大屏舒展 - Grid 区域间用
gap，但段落内距用margin-bottom——混用gap和margin容易在 Safari 中出现双倍间距
最常被忽略的是 grid-template-rows 的隐式行为：没显式定义行高时，Grid 会按内容撑开，但图片、iframe 等替换元素可能破坏行高一致性。得给 img 加 max-width: 100% 和 height: auto，否则 Grid 容器会意外拉高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
