CSS 布局被写乱，通常不是语法记错，而是 Flex 和 Grid 各管什么没分清。一句话：Flex 解决「这一排（或这一列）里的元素怎么分空间」；Grid 解决「这块区域怎么切行切列」。
导航：用 Flex
css
.nav {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.25rem;
}
.nav a:last-child {
margin-left: auto;
}gap 代替 margin-right，换行也不会在最后一个元素留下空隙。margin-left: auto 把登录按钮推到右侧，比再套一层空 div 干净。
列表页：用 Grid
主栏 + 侧栏，或者卡片墙，Grid 一次能说清：
css
.page {
display: grid;
grid-template-columns: minmax(0, 1fr) 18rem;
gap: 1.25rem;
align-items: start;
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
gap: 1rem;
}
@media (max-width: 800px) {
.page {
grid-template-columns: 1fr;
}
}minmax(0, 1fr) 很关键。默认 minmax(auto, 1fr) 会按子元素最小内容撑开，长单词或代码块会把整栏顶出视口。
别在 Grid 格子里再套一层「全宽 Flex 居中」当排版
格子已经定宽了，正文用正常文档流：
css
.article {
max-width: 42rem;
}
.article img {
max-width: 100%;
height: auto;
}需要「沿主轴均匀排按钮」时再上 Flex。两个模型叠在同一个节点上，出 bug 时你分不清是哪一层在抢宽度。
快速对照
- 一组按钮、标签、头像+名字：Flex
- 整页分栏、相册墙、仪表盘：Grid
- 未知数量、希望自动填满：
auto-fill+minmax - 已知三列且中间更宽：
1fr 2fr 1fr
先画格子，再排一行里的东西。这个顺序对了，!important 和负 margin 会少用很多。