Grid负责页面宏观结构，Flex处理局部对齐。用Grid定义仪表盘的header、sidebar、main和footer区域布局，再在各区域内使用Flexbox实现内容居中、垂直排列和卡片换行；通过媒体查询在小屏下调整Grid为单列，Flex内部布局保持自适应，实现高效响应式设计。
Grid布局和Flexbox并不是互斥的，它们可以协同工作。在实际开发中，用CSS Grid做整体页面结构布局，再用Flexbox处理Grid子元素内部的对齐与排列，是一种非常高效且灵活的组合方式。下面通过一个具体实践案例，展示如何结合使用Grid和Flex实现清晰、响应式的页面结构。
整体布局使用Grid划分区域
假设我们要构建一个常见的仪表盘页面，包含头部、侧边栏、主内容区和底部页脚。我们可以使用Grid来定义这些大区块的位置。
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
height: 100vh;
gap: 10px;
}
.header { grid-area: header; background: #4a90e2; }
.sidebar { grid-area: sidebar; background: #d8d8d8; }
.main { grid-area: main; background: #f5f5f5; }
.footer { grid-area: footer; background: #9b9b9b; }
Flex子元素处理内部内容排列
在Grid划分出的每个区域内，使用Flexbox来控制内部元素的对齐和分布，比如让头部内容水平居中、侧边栏菜单垂直排列并居中图标与文字等。
例如，在.header中希望导航链接居中显示：
立即学习“前端免费学习笔记（深入）”；
.header {
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
}
在.sidebar中让菜单项垂直排列并上下留白均匀：
.sidebar {
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 20px 0;
}
主内容区卡片列表使用Flex自动换行
主内容区可能包含多个卡片，我们希望它们在容器内自动换行并均匀分布。虽然Grid也能实现这类布局，但用Flex更简洁直观。
.main {
padding: 20px;
display: flex;
flex-wrap: wrap;
gap: 15px;
align-content: flex-start;
}
.card {
flex: 1 1 300px;
background: white;
border-radius: 8px;
padding: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
min-height: 100px;
}
这样，卡片会根据容器宽度自动换行，每张最小300px，最大可扩展至占满一行，实现良好的响应式效果。
响应式调整Grid结构配合Flex自适应
在小屏幕上，我们可以改变Grid布局为单列，并保持内部Flex行为不变，无需重写子元素样式。
@media (max-width: 768px) {
.container {
grid-template-areas:
"header"
"sidebar"
"main"
"footer";
grid-template-columns: 1fr;
}
}
此时，原本横向排列的侧边栏和主内容变为垂直堆叠，而每个区域内的Flex布局依然有效，如卡片继续按需换行，头部内容仍居中。
基本上就这些。Grid负责宏观布局结构，Flex专注于局部对齐与流动排列，两者结合能应对大多数现代网页布局需求，既清晰又灵活。不复杂但容易忽略的是：别试图用一种布局模式解决所有问题，合理分工才是关键。
