无需媒体查询实现容器内div自适应宽度自动换行的响应式布局

使用CSS Grid的自适应列语法即可完全满足需求，不需要写任何媒体查询规则，支持内部div数量动态变化，适配全尺寸屏幕：

• 常规宽屏场景下，内部div会自动平分宽度，撑满容器整宽
• 屏幕宽度收缩到阈值以下时，div自动换行，始终保持你设定的最小宽度，不会被挤压变形
• 内部div增删时无需调整CSS代码

核心配置为容器的grid-template-columns属性使用repeat(auto-fit, minmax(自定义最小宽度, 1fr))：

• auto-fit：自动计算当前容器宽度可容纳的、满足最小宽度要求的列数，折叠空列后将剩余宽度全部分配给现有元素，实现撑满整宽的效果
• minmax()：定义单列宽度范围，宽度下限为你设置的最小宽度，上限为1份剩余可用空间

注意不要将auto-fit替换为auto-fill，后者会保留空列占位，无法让现有元素撑满容器宽度，是这类需求的常见踩坑点。

完整可运行代码 #

<style>
.container {
  display: grid;
  width: 100%;
  /* 280px可替换为你实际需要的内部div最小宽度 */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  /* 可选：设置内部div之间的间距，按需调整 */
  gap: 12px;
}
/* 可选：内部div基础样式，按需修改 */
.container > div {
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
}
</style>

<div class="container">
    <div>pippo</div>
    <div>pluto</div>
    <div>paperino</div>
    <div>topolino</div>
</div>

Flex备选方案 #

如果偏好Flex布局，也可以通过以下配置实现，只是宽度计算的容错性略低于Grid方案：

.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 12px;
}
.container > div {
  /* 280px替换为你需要的最小宽度 */
  flex: 1 1 280px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
}

内容的提问来源于stack exchange，提问作者Adrien Hingert