推荐分层：外层用grid划分头部/主区/底部三大轨道，各区块内部用flex控制子元素排列，既保留grid二维控制力，又发挥flex一维对齐弹性。
用 grid 做主结构，flex 处理内部对齐
纯 grid 或纯 flex 都容易在复杂页面翻车。比如顶部导航要横向平铺+右侧登录入口右对齐，中间是卡片网格，底部又要三栏信息+版权居中——这种混合需求，硬塞进一个 display 模式里会不断加 hack。
推荐分层：外层容器用 display: grid 划分「头部 / 主区 / 底部」三大轨道；每个区块内部再用 display: flex 控制子元素排列。这样既保留 grid 的二维控制力，又利用 flex 的内联对齐弹性。
- 头部区域设
grid-template-columns: 1fr auto，左侧 logo 占剩余空间，右侧按钮组用display: flex; justify-content: flex-end - 主内容区用
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))，卡片内部标题+描述+按钮用flex-direction: column垂直堆叠 - 底部三栏用
grid-template-columns: 1fr 1fr 2fr，每栏内文字列表用flex-wrap: wrap防止小屏换行错乱
@media 只干预关键断点，别重写整套布局
很多人一写响应式就疯狂复制 @media 块，每个断点都从头定义 grid-template-columns 和 flex-direction。结果维护成本爆炸，而且容易漏掉某一层的适配。
真正该用媒体查询的，只有三类变化：列数突变（如桌面 4 列 → 平板 2 列 → 手机 1 列）、间隙缩放（gap: 24px → gap: 12px）、内容流向调整（如手机端把侧边操作按钮移到卡片底部）。
- 避免在
@media (max-width: 768px)里写display: block——这等于放弃 grid/flex 的所有优势 - 不要为每个组件单独写媒体查询，统一收口到布局容器上，比如只在
.main-grid类上改grid-template-columns - 用
minmax(240px, 1fr)时，240px 要略大于卡片内最窄内容（如带图标的一行文字 + 内边距），否则小屏会压缩溢出
图片和文字必须做内敛兜底，否则 grid 会失效
Grid 只负责划分轨道，不关心内容是否撑破。常见翻车现场：卡片里一张未约束的 <img> 在小屏下宽度超 100%，直接顶开网格项；或者长 URL 没换行，把整个格子横向拉宽。
子项必须加这几行保命样式：
img {
max-width: 100%;
height: auto;
}
.grid-item p,
.grid-item span {
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
- 别依赖
word-break: break-all，它会粗暴截断英文单词，影响可读性 - 如果卡片有固定高度（如
height: 180px），hover 放大时要用transform: scale(1.03)而非width/height，否则触发重排导致下方卡片跳动 -
box-sizing: border-box必须全局启用，否则 padding/margin 会叠加在 minmax() 计算之外
Safari 15.4 之前不支持 gap 在 inline-grid 上生效
这个坑非常隐蔽：你在 Chrome 里写 display: inline-grid; gap: 12px 看着 perfectly fine，但 Safari 用户看到的是零间距甚至错位。根本原因是 Safari 旧版本只认 display: grid 的 gap。
解决方案很简单，但必须主动检查：
- 所有用到
gap的容器，强制写成display: grid，别偷懒用inline-grid - 如果真需要内联行为（比如嵌在段落中），用
margin替代gap，并配合:not(:last-child)控制末尾不留空 - 用
grid-auto-flow: dense前先确认是否真需要重排序——它会让小卡片提前占位，可能打乱语义顺序，对屏幕阅读器不友好
混合布局不是“拼凑”，而是分层信任：让 grid 管二维结构，flex 管一维流动，媒体查询只管关键转折点。最难的其实是克制——别在每个地方都加响应逻辑，留白和固定值有时比“全适配”更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
