Grid负责页面整体二维布局，Flex处理局部一维对齐；通过repeat(auto-fit, minmax(300px,1fr))实现自适应多栏，Flex确保内部元素对齐，结合媒体查询在小屏下转单列或调整方向，合理分工并依据内容设断点可构建清晰响应式布局。
响应式多栏布局是现代网页设计中的常见需求。通过结合CSS的Flexbox和Grid，可以灵活地构建既适应不同屏幕尺寸又结构清晰的布局。下面介绍如何有效使用Flex和Grid实现这一目标。
理解Flex与Grid的分工
在组合使用时，建议明确两者的角色：
- Grid用于整体页面结构：比如将页面划分为头部、侧边栏、主内容区、页脚等大区域。
- Flex用于局部元素排列：例如导航菜单项对齐、卡片内部图文排布等。
这种分工让布局更易维护，Grid控制二维网格，Flex处理一维空间内的动态伸缩。
使用Grid搭建响应式主框架
利用CSS Grid可以快速定义响应式网格容器。通过fr单位和minmax()函数，使列宽随容器自动调整。
立即学习“前端免费学习笔记（深入）”；
示例代码：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
padding: 20px;
}
上述设置会创建一个最小300px、最大1fr的自适应多栏布局，在小屏幕上自动换行成单列，大屏则并排显示多栏。
用Flex优化内部元素对齐
在Grid的每个栏目内，使用Flex布局来对齐子元素。比如在一个信息卡片中，让图标和文字水平对齐且垂直居中。
示例：
.card {
display: flex;
align-items: center;
gap: 10px;
}
或者在导航栏中均匀分布菜单项：
.nav {
display: flex;
justify-content: space-between;
}
Flex的优势在于它能根据内容动态分配空间，特别适合不确定宽度或需要对齐的场景。
结合媒体查询增强响应性
虽然Grid和Flex本身具有响应能力，但在特定断点下微调样式仍有必要。加入媒体查询可进一步提升体验。
例如：
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}
在移动端强制变为单列，避免内容过挤。也可为Flex容器切换方向：
@media (max-width: 480px) {
.header {
flex-direction: column;
}
}
基本上就这些。合理划分Grid与Flex的应用层级，再辅以简单的媒体查询，就能构建出稳定且美观的响应式多栏布局。不复杂但容易忽略的是结构语义化和断点选择，建议根据实际内容而非设备盲目设定断点。
