CSS现代布局实战：Grid与Flexbox混合布局完全指南 | CSS高级技巧

文章小助手 css

2025-07-15 0 799

CSS现代布局实战：Grid与Flexbox混合布局完全指南

核心价值： CSS Grid和Flexbox是现代网页布局的两大支柱，本文将展示如何巧妙结合两者，创建响应式、灵活且高效的页面布局。

1. 基础混合布局模式

Grid定义宏观布局，Flexbox处理微观排列：

主内容区

Grid控制整体结构，Flexbox管理内部元素排列

.container {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 20px;
}

aside {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

2. 响应式卡片布局

Grid定义行列，Flexbox控制卡片内部：

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid #eee;
}

.card-content {
  flex: 1; /* 内容区自动填充剩余空间 */
}

3. 复杂表单布局

Grid创建表单结构，Flexbox排列表单元素：

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group.double {
  grid-column: span 2;
}

4. 媒体对象与网格结合

Grid控制整体，Flexbox处理媒体对象：

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

.media-object {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}

.media-content {
  flex: 1;
}

布局需求	Grid适用场景	Flexbox适用场景
二维布局	✓ 行列同时控制	× 只能单向控制
内容流排列	× 不够灵活	✓ 自动调整
间隙控制	✓ gap属性	× 需要margin

5. 实战：仪表盘布局

.dashboard {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main";
  grid-template-rows: auto 1fr;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

.header {
  grid-area: header;
  display: flex;
  justify-content: space-between;
}

.sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
}

.main {
  grid-area: main;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

通过合理结合Grid和Flexbox，可以创建出既结构清晰又灵活响应的现代网页布局，大幅提升开发效率和视觉效果。