React中能否用一维数组渲染二维网格？仅靠样式实现3×3布局

API 探路者

2026-8-12

实现3×3网格的CSS方案

当然可以，无需修改现有DOM结构，仅通过添加CSS样式就能把纵向堆叠的cell变成3×3网格，以下是两种实用方案：

方案一：CSS Grid（推荐）

CSS Grid是专门为网格布局设计的方案，代码简洁直观：

.grid {
  display: grid;
  /* 定义3列，每列宽度均等分配可用空间 */
  grid-template-columns: repeat(3, 1fr);
  /* 可选：设置单元格之间的间距 */
  gap: 8px;
}

.cell {
  /* 可选：添加基础样式让网格更清晰 */
  padding: 16px;
  border: 1px solid #eee;
  text-align: center;
}

说明：

display: grid：将容器设置为网格布局容器
grid-template-columns: repeat(3, 1fr)：重复生成3列，每列占1份容器可用宽度
因为总共有9个cell元素，Grid会自动将它们排列为3行（每行3个）

方案二：Flexbox

如果更习惯用Flexbox布局，也能实现同样效果：

.grid {
  display: flex;
  /* 允许元素在一行放不下时自动换行 */
  flex-wrap: wrap;
  /* 可选：设置容器内元素的间距 */
  gap: 8px;
}

.cell {
  /* 每个cell占容器宽度的1/3，不放大不缩小；计算值扣除gap的占比，确保3个cell刚好填满一行 */
  flex: 0 0 calc(33.333% - 5.333px);
  /* 可选：添加基础样式让网格更清晰 */
  padding: 16px;
  border: 1px solid #eee;
  text-align: center;
}