在CSS初级项目里，响应式三栏布局是很多页面的基础结构，单独使用Flex或Grid都能实现，但结合两者使用可以兼顾开发效率和布局灵活性，适配从手机到桌面的不同屏幕尺寸。
Flex和Grid的核心特性对比
在结合使用之前，先明确两种布局方案的优势，方便后续合理分配使用场景：
| 布局方案 | 核心优势 | 适用场景 |
|---|---|---|
| Flex | 一维布局，子元素排列方向控制简单，对齐方式丰富 | 导航栏、卡片列表、单行或单列的元素排列 |
| Grid | 二维布局，可同时控制行和列的排列，区域划分清晰 | 整体页面框架、多行多列的复杂布局 |
结合Flex和Grid实现响应式三栏布局的步骤
1. 搭建基础HTML结构
先创建包含头部、三栏主体、底部的页面结构，三栏主体用容器包裹，内部放左栏、主内容区、右栏三个子元素：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式三栏布局</title>
</head>
<body>
<header class="header">页面头部</header>
<main class="main-container">
<aside class="left-sidebar">左栏内容</aside>
<section class="content">主内容区</section>
<aside class="right-sidebar">右栏内容</aside>
</main>
<footer class="footer">页面底部</footer>
</body>
</html>
2. 用Grid定义整体页面框架
先用Grid布局划分页面的整体区域，让头部、主体、底部按垂直方向排列，同时给主体区域预留三栏的横向空间：
/* 全局基础样式重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
/* 用Grid做整体垂直布局 */
display: grid;
grid-template-rows: 60px 1fr 40px;
grid-template-areas:
"header"
"main"
"footer";
}
.header {
grid-area: header;
background-color: #f0f0f0;
padding: 10px;
}
.main-container {
grid-area: main;
/* 主体区域内部用Grid划分三栏 */
display: grid;
grid-template-columns: 200px 1fr 200px;
gap: 16px;
padding: 16px;
}
.footer {
grid-area: footer;
background-color: #f0f0f0;
padding: 10px;
}
3. 用Flex优化三栏内部排列
三栏内部的子元素如果需要垂直排列或者对齐，可以用Flex布局优化，比如左栏的导航项垂直排列：
.left-sidebar {
background-color: #e8f4ff;
padding: 16px;
/* 左栏内部用Flex做垂直排列 */
display: flex;
flex-direction: column;
gap: 12px;
}
.right-sidebar {
background-color: #e8f4ff;
padding: 16px;
}
.content {
background-color: #fff;
padding: 16px;
min-height: 400px;
}
4. 添加响应式适配逻辑
当屏幕宽度小于768px时，三栏会挤在一起，此时需要修改Grid的列配置，让三栏变为垂直排列：
/* 平板及以下设备适配 */
@media (max-width: 768px) {
.main-container {
/* 屏幕变窄时，三栏变为垂直排列，每栏占满宽度 */
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
}
}
/* 手机小屏适配，调整内边距 */
@media (max-width: 480px) {
.main-container {
padding: 8px;
gap: 8px;
}
}
实现注意事项
- Grid布局的
grid-template-columns属性中，1fr代表剩余空间分配比例，这里中间主内容区占满剩余宽度，符合三栏布局的常见需求 - 响应式断点可以根据实际项目调整，768px是平板设备的常见分界宽度
- 如果三栏内部有需要水平排列的元素，比如右栏的标签列表，也可以单独给对应区域加Flex布局，不需要修改整体框架
完整可运行代码
以下是整合所有逻辑的完整代码，可直接复制到HTML文件中运行查看效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式三栏布局</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: grid;
grid-template-rows: 60px 1fr 40px;
grid-template-areas:
"header"
"main"
"footer";
font-family: Arial, sans-serif;
}
.header {
grid-area: header;
background-color: #f0f0f0;
padding: 10px;
display: flex;
align-items: center;
}
.main-container {
grid-area: main;
display: grid;
grid-template-columns: 200px 1fr 200px;
gap: 16px;
padding: 16px;
}
.left-sidebar {
background-color: #e8f4ff;
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.content {
background-color: #fff;
padding: 16px;
min-height: 400px;
border: 1px solid #eee;
}
.right-sidebar {
background-color: #e8f4ff;
padding: 16px;
}
.footer {
grid-area: footer;
background-color: #f0f0f0;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 768px) {
.main-container {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
}
}
@media (max-width: 480px) {
.main-container {
padding: 8px;
gap: 8px;
}
}
</style>
</head>
<body>
<header class="header">页面头部</header>
<main class="main-container">
<aside class="left-sidebar">
<div>导航项1</div>
<div>导航项2</div>
<div>导航项3</div>
</aside>
<section class="content">
<h3>主内容区</h3>
<p>这里是页面的核心内容区域，会根据屏幕宽度自动调整显示范围。</p>
</section>
<aside class="right-sidebar">
<div>相关推荐1</div>
<div>相关推荐2</div>
</aside>
</main>
<footer class="footer">页面底部</footer>
</body>
</html>