现代 CSS 布局技巧：Grid 与 Flexbox 实战指南

布局的革命

CSS Grid 和 Flexbox 的诞生彻底改变 了 Web 布局的方式。本文将用实际案例带你掌握这两种布局模式。

Flexbox：一维布局

Flexbox 最适合做一维布局（行或列），常用于导航栏、卡片列表、居中对齐等场景。

导航栏示例

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

Grid：二维布局

Grid 最擅长二维布局，适合做页面整体结构和复杂网格：

.grid-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    grid-template-rows: auto 1fr auto;
    gap: 2rem;
}

实战：博客页面布局

结合 Grid 和 Flexbox 可以做出响应式博客布局：Grid 负责整体骨架，Flexbox 负责局部细节。

记住：Grid 用于宏观布局，Flexbox 用于微观排列。