display: grid 是搭建博客主页最直接有效的方案，通过 grid-template-areas 定义语义区域（header/main/aside/footer），配合 minmax() 控制列宽、媒体查询重排区域顺序，并用 aspect-ratio 和 -webkit-line-clamp 处理卡片细节。
display: grid 是目前搭建博客主页最直接有效的方案，不用框架、不写 JS、不靠媒体查询堆砌，5 分钟内就能跑通完整结构。
用 grid-template-areas 定义语义区域，别碰 float 或 flex 嵌套
博客页核心就四块：头部、主内容（文章列表）、侧边栏、页脚。硬写 grid-column: 1 / 3 容易错位，用命名区域更稳：
.blog-layout {<br> display: grid;<br> grid-template-areas:<br> "header header"<br> "main aside"<br> "footer footer";<br> grid-template-rows: auto 1fr auto;<br> grid-template-columns: 1fr minmax(280px, 35%);<br> gap: 1.5rem;<br>}注意两点：•
grid-area: header 必须和 HTML 元素的 grid-area 值严格一致，大小写、空格都不能差•
minmax(280px, 35%) 比纯 300px 更安全——窄屏下不塌缩，宽屏下也不抢主内容空间
主内容区用 1fr，但侧边栏别写死 300px
常见错误是给侧边栏设固定宽度，结果在 375px 屏上溢出或留白过大。
推荐写法：
• 主内容：1fr 或 minmax(0, 4fr)（后者防极端窄屏挤压）
• 侧边栏：minmax(280px, 1fr)，既保最小可用宽度，又允许随容器扩展
• 避免混用 1fr 2fr 这类比例——当某列内容超长时，Grid 会优先压缩没加 minmax() 的列，反而导致布局崩坏
小屏下重排 grid-template-areas，不是只 hide 侧边栏
只写 aside { display: none } 会砍掉功能路径（比如搜索框、分类标签），也浪费了 Grid 的响应式能力。
正确做法是媒体查询里直接重定义区域顺序：
@media (max-width: 768px) {<br> .blog-layout {<br> grid-template-areas:<br> "header"<br> "main"<br> "aside"<br> "footer";<br> grid-template-columns: 1fr;<br> }<br>}这样：• 侧边栏自动下移到主内容之后，DOM 顺序不变，语义和可访问性保留
• 不用额外加
margin-top，Grid 自动按区域顺序排列• 若侧边栏含关键功能（如登录入口），可改用
position: sticky 而非隐藏
aspect-ratio 和 -webkit-line-clamp 处理卡片细节
文章卡片常卡在图片拉伸、摘要截断两件事上，用传统 padding-top 或 JS 计算太重。
现代解法：
• 图片容器加 aspect-ratio: 16 / 9，内部 img { width: 100%; height: 100%; object-fit: cover; }
• 摘要文字用三行截断：display: -webkit-box; -webkit-line-clamp: 3; overflow: hidden; -webkit-box-orient: vertical;
注意：aspect-ratio 在 Safari 15.4+、Chrome 88+、Firefox 89+ 支持；旧版 Safari 需 fallback 到 padding-top 方案
立即学习“前端免费学习笔记（深入）”；
真正卡住人的不是 Grid 语法本身，而是把“区域命名”和“实际元素的grid-area 值”配错——一个空格、一个大小写，整个布局就失效，且控制台不报错。 
