使用Grid或Flexbox实现指定行列布局的技术方案咨询

数据老陈

2026-10-21

布局实现方案

下面给出CSS Grid和Flexbox两种主流实现方案，可根据兼容性需求选择：

1. CSS Grid 方案（推荐，代码最简洁）

Grid原生支持不规则列布局，无需额外嵌套行容器，适配性更强：

HTML 结构

<div class="grid-container">
  <div class="grid-item">模块1</div>
  <div class="grid-item">模块2</div>
  <div class="grid-item">模块3</div>
  <div class="grid-item item-full">模块4</div>
  <div class="grid-item">模块5</div>
</div>

CSS 代码

.grid-container {
  display: grid;
  /* 定义基础列数为3列，宽度可根据需求调整为固定值，比如200px 1fr 200px */
  grid-template-columns: repeat(3, 1fr);
  /* 模块间距按需调整 */
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.grid-item {
  background: #f5f5f5;
  padding: 24px;
  border-radius: 4px;
}

/* 第二行第一个模块跨2列，自动把第二行拆分为2列布局 */
.item-full {
  grid-column: span 2;
}

2. Flexbox 方案（兼容性更好）

如果需要兼容低版本IE，可以选择Flex方案，需要嵌套行容器实现：

HTML 结构

<div class="flex-wrapper">
  <!-- 第一行3列 -->
  <div class="flex-row">
    <div class="flex-item">模块1</div>
    <div class="flex-item">模块2</div>
    <div class="flex-item">模块3</div>
  </div>
  <!-- 第二行2列 -->
  <div class="flex-row">
    <div class="flex-item item-large">模块4</div>
    <div class="flex-item">模块5</div>
  </div>
</div>

CSS 代码

.flex-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

.flex-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}
.flex-row:last-child {
  margin-bottom: 0;
}

.flex-item {
  flex: 1;
  background: #f5f5f5;
  padding: 24px;
  border-radius: 4px;
}

/* 第二行第一个模块占2份宽度，和3列布局的总宽度对齐 */
.item-large {
  flex: 2;
}