CSS实现数组结果的Grid网格布局展示

当然可以！用CSS结合DIV实现这种每行3/4个结果的网格布局非常简单，我给你推荐两种常用且灵活的方案，你可以直接套用到你的代码里：

这是最常用的布局方式，适配性强，代码也容易理解。

1. 基础HTML结构 #

假设你的数组结果会被渲染成这样的DIV结构（你可以根据自己的实际代码调整类名）：

<div class="results-container">
  <div class="result-item">数组结果1</div>
  <div class="result-item">数组结果2</div>
  <div class="result-item">数组结果3</div>
  <div class="result-item">数组结果4</div>
  <!-- 更多结果项 -->
</div>

2. Flexbox 样式代码 #

每行显示3个结果： #

.results-container {
  display: flex;
  flex-wrap: wrap; /* 让结果项超出容器时自动换行 */
  gap: 1rem; /* 结果项之间的间距，可选，根据需要调整 */
  padding: 1rem; /* 容器内边距，可选 */
}

.result-item {
  flex: 0 0 calc(33.333% - 0.666rem); /* 计算每行3个的宽度，减去gap的占比 */
  background: #f0f0f0;
  padding: 1.5rem;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

切换成每行4个结果： #

只需要修改.result-item的宽度计算即可：

.result-item {
  flex: 0 0 calc(25% - 0.75rem); /* 每行4个的宽度计算 */
}

小提示：

如果想要自适应布局（比如屏幕变小时自动减少每行数量），可以把flex: 0 0 [宽度]改成flex: 1 1 30%;，这样当容器宽度不够时，结果项会自动缩小并换行，非常适合响应式场景。

如果你需要更精确的行列控制，CSS Grid会是更好的选择，代码也更简洁：

1. 同样的HTML结构（和上面一致） #

2. Grid 样式代码 #

每行显示3个结果： #

.results-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 直接指定每行3列，自动平分容器宽度 */
  gap: 1rem;
  padding: 1rem;
}

.result-item {
  background: #f0f0f0;
  padding: 1.5rem;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

切换成每行4个结果： #

.results-container {
  grid-template-columns: repeat(4, 1fr); /* 改成4列即可 */
}

如果需要在手机、平板等不同设备上自动调整每行数量，可以加上媒体查询：

/* 平板屏幕（最大宽度768px）：每行2个 */
@media (max-width: 768px) {
  .results-container {
    grid-template-columns: repeat(2, 1fr);
    /* Flex版本的话：.result-item { flex: 0 0 calc(50% - 0.5rem); } */
  }
}

/* 手机屏幕（最大宽度480px）：每行1个 */
@media (max-width: 480px) {
  .results-container {
    grid-template-columns: 1fr;
    /* Flex版本：.result-item { flex: 0 0 100%; } */
  }
}

这样你的网格布局就能在各种设备上都有不错的显示效果啦！

内容的提问来源于stack exchange，提问作者Adetona Abiodun Abdulquadri