能否使用CSS Grid实现图中未知数量元素四列均匀排布的布局？

云上老周

2026-10-1

你可以直接用CSS Grid实现该布局，无需提前知道元素总数，具体方案如下：

核心实现逻辑

给外层容器设置Grid布局，直接将宽度等分为4份，元素会自动按顺序填充，数量不足一行时会自动顺延到下一行，始终保持4列均匀排布的规则。

示例代码

HTML结构

<div class="grid-wrapper">
  <div class="item">示例元素1</div>
  <div class="item">示例元素2</div>
  <div class="item">示例元素3</div>
  <!-- 可插入任意数量的item元素 -->
  <div class="item">示例元素N</div>
</div>

CSS样式

.grid-wrapper {
  display: grid;
  /* 核心配置：将容器宽度平均分为4列，每列宽度占1/4 */
  grid-template-columns: repeat(4, 1fr);
  /* 可选配置：设置行列之间的间距，数值可按需调整 */
  gap: 12px;
}

/* 可选的元素基础样式，按需自定义即可 */
.item {
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
}