css响应式网格布局自动填充子元素

使用 Grid 布局结合 repeat(auto-fill, minmax()) 可实现响应式网格，根据屏幕尺寸自动调整列数并均匀分布子元素；.container 设置 display: grid 和 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))，gap 控制间距；auto-fill 保留空轨道，auto-fit 折叠空轨道使内容更紧凑；无需媒体查询即可在大屏、平板、手机上自适应显示多列到单列；通过 .item 的 break-inside、overflow 和 img 的 max-width 确保内容适配，避免溢出，实现高效简洁的响应式布局。

要实现 CSS 响应式网格布局并自动填充子元素，推荐使用 Grid 布局 结合 repeat() 与 auto-fit 或 auto-fill 配合 minmax()。这样可以让容器根据屏幕尺寸自动调整列数，并均匀分布子元素。

基本语法结构

通过以下 CSS 设置，可以让网格容器在不同屏幕下自动换行并填满可用空间：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

• repeat(auto-fill, ...)：自动重复列轨道，有空间就生成新列
• minmax(200px, 1fr)：每列最小 200px，最大为 1fr（平均分配剩余空间）
• gap：设置子元素之间的间距

auto-fill 与 auto-fit 的区别

两者都能自动创建列，但行为略有不同：

• auto-fill：即使子元素不够，也会保留空轨道。适合希望留白扩展的场景
• auto-fit：会将空轨道折叠，让现有子元素拉伸填满容器

例如用 auto-fit 更紧凑：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

响应式无需媒体查询

上述写法已具备响应能力，浏览器会自动计算在当前容器宽度下能放下多少个最小 200px 的列。不需要写多个 @media 规则也能实现多列到单列的平滑过渡。

• 大屏：显示 5 列
• 平板：自动变为 3 列
• 手机：变成 1 列垂直排列

子元素内容自适应

确保子元素不会溢出或固定宽度影响布局：

.item {
  break-inside: avoid; /* 避免内部断行 */
  overflow: hidden;
  text-overflow: ellipsis;
}
img {
  max-width: 100%;
  height: auto;
}

这样图片和文字能随网格缩放而适配。

基本上就这些。用 repeat(auto-fill, minmax()) 是目前最简洁高效的响应式网格方案，兼容现代主流浏览器。