CSS Grid实现auto-fill布局并保持子元素宽高比例一致

安全阿岳

2026-7-13

用CSS 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">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <!-- 可随意增减子元素数量 -->
</div>

CSS 实现

.grid-container {
  display: grid;
  /* 核心：自动填充列，最小宽度200px，剩余空间均分缩放 */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* 网格项间距，可按需调整 */
  gap: 1rem;
  /* 容器内边距，避免元素贴边 */
  padding: 1rem;
}

.grid-item {
  /* 固定宽高比，这里是1:1，可改为4/3、16/9等比例 */
  aspect-ratio: 1 / 1;
  /* 可选：内容居中样式 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 可选：美化样式 */
  background: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

关键属性说明

repeat(auto-fill, minmax(200px, 1fr))：这是自适应核心逻辑。auto-fill会根据容器宽度自动计算可容纳的最大列数；minmax(200px,1fr)保证每列最小宽度不低于200px，同时将容器剩余空间平均分配给每一列，实现子元素自动缩放。
aspect-ratio: 1/1：强制子元素保持固定宽高比，替换数值即可调整比例（比如4/3对应竖版卡片）。若需兼容极旧浏览器，可用padding-top: 100%配合绝对定位替代，但现代浏览器优先用aspect-ratio更简洁。
gap：控制网格项之间的间距，比margin更高效，避免元素拥挤。