Grid 负责整体二维布局，Flexbox 处理区域内部一维排列；用 grid-template-areas 划分区块，内部用 Flexbox 排列子元素，响应式通过媒体查询重定义 Grid 结构，保持 Flexbox 弹性。

现代网页排版不是非此即彼的选择，而是让 Grid 和 Flexbox 各司其职：Grid 搭骨架，Flexbox 理细节。

用 CSS Grid 划分整体页面结构

Grid 天然适合二维区域划分，比如头部、导航、主内容、侧边栏、页脚这类明确区块。推荐用 grid-template-areas 命名区域，代码直观易维护。

常见写法示例：

• 给 body 或最外层容器设 display: grid
• 定义布局模板：grid-template-areas: "header header" "nav main" "aside main" "footer footer"
• 设定列宽行高：grid-template-columns: 240px 1fr（侧边栏固定，主区自适应）
• 统一间距用 gap: 1rem，比 margin 更干净

在 Grid 区域内部用 Flexbox 排列子元素

每个命名区域（如 main、nav、header）内部往往是一维流式内容——导航菜单、文章列表、按钮组、卡片行等，这时 Flexbox 更灵活自然。

立即学习“前端免费学习笔记（深入）”；

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

典型场景：

• 导航栏：nav 内部设 display: flex; justify-content: space-between; align-items: center
• 卡片列表：.card-list 设 display: flex; flex-wrap: wrap; gap: 1.25rem，卡片用 flex: 0 0 calc(33.333% - 1.25rem) 或更简洁的 flex-basis: 300px
• 表单控件组：label + input + button 水平对齐，用 display: flex; align-items: center; gap: 0.5rem

响应式切换靠媒体查询 + 布局重定义

不要试图用一套 Grid 规则适配所有尺寸。应在断点处重新组织 grid-template-areas 和 grid-template-columns，同时保持内部 Flexbox 不变——它本身就有良好弹性。

例如小屏时：

• 移除侧边栏区域：grid-template-areas: "header" "main" "footer"
• 把原先两列变为单列：grid-template-columns: 1fr
• Flex 容器内自动换行（flex-wrap: wrap）和 gap 仍生效，无需额外调整

避免常见冲突与冗余

混合使用时容易踩坑，关键注意三点：

• 别在同一个容器上既设 display: grid 又设 display: flex——选一个，层级分明
• Grid 的 align-items 和 Flexbox 的同名属性作用对象不同，不会冲突，但要清楚控制的是哪一层
• 语义化标签（header、main、aside）直接加 grid-area 即可，不用额外包裹 div，结构更干净