如何实现带有静态数据的响应式Grid网格组件？

以下是针对需求优化后的代码，可实现响应式布局并匹配目标效果：

完整代码 #

CSS #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.grid-container {
  display: grid;
  /* 响应式列：自动适配屏幕，每列最小200px，剩余空间均分 */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  /* 行高最小150px，可随内容自动增高 */
  grid-auto-rows: minmax(150px, auto);
  gap: 15px;
  padding: 15px;
  min-height: 100vh;
}

.grid-item {
  background-color: #e0e0e0;
  border: 1px solid #bdbdbd;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 500;
}

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">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
  <div class="grid-item">10</div>
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>
  <div class="grid-item">13</div>
  <div class="grid-item">14</div>
  <div class="grid-item">15</div>
  <div class="grid-item">16</div>
</div>

核心修改点 #

• 响应式列配置：用repeat(auto-fit, minmax(200px, 1fr))替代固定4列，实现屏幕宽度变化时自动增减列数，保证每列不会过窄。
• 灵活行高：替换固定行高为grid-auto-rows: minmax(150px, auto)，既保证元素最小高度，又支持内容自动撑开。
• 布局细节优化：添加全局样式重置、容器内边距、元素圆角，让视觉效果更贴近目标图。
• 容器高度适配：使用min-height: 100vh，确保容器至少占满视口高度，内容过多时自动延伸。

内容的提问来源于stack exchange，提问作者Christpher Cosdumbus