如何用纯CSS无媒体查询实现指定尺寸范围的视口响应式网格？

我想仅用纯CSS、尽量不用媒体查询，做一个始终占满视口100%的网格，要求满足：

• 行列数量由视口尺寸和后续规则决定
• 单元格的宽/高不能小于180px，除非视口本身宽/高不足180px，这时对应方向的单元格直接占满可用空间（比如视口高150px、宽400px时，网格是1行150px高，2列各200px宽；视口高400px、宽200px时，是2行各200px高，1列200px宽）
• 单元格的宽/高不能超过359px
• 单元格尺寸在180px-359px之间自适应变化
• 视口任一方向每增加180px，就新增对应行/列

示例示意图：

viewport: 150px height
          400px width
1 row: 150px
2 columns: each 200px
+-------+-------+
|       |       |
+-------+-------+

viewport: 400px height
          200px width
2 rows: each 200px
1 column: 200px
+-------+
|       |
|       |
+-------+
|       |
|       |
+-------+

我试了几种写法都达不到预期：

html, body, #grid { width: 100%; height: 100%; margin: 0; box-sizing: border-box; }

#grid {
  grid-template:
    repeat(minmax(1, calc(100vh / 180px)), minmax(180px, minmax(1fr, 359px))) /
    repeat(minmax(1, calc(100vw / 180px)), minmax(180px, minmax(1fr, 359px)));
}

#grid {
  grid-template:
    repeat(auto-fit, minmax(180px, minmax(1fr,359px))) /
    repeat(auto-fit, minmax(180px, minmax(1fr,359px)));
}

能不能仅用纯CSS、不用媒体查询实现？如果可以，具体怎么写？

补充：单元格里会放设置了object-fit: cover的img元素，我核心需求是避免视口缩小后图片显示区域太小，也考虑过用JS方案——视口缩小时让单元格跨行/跨列，直觉上这可能更灵活。

解决方案 #

当然可以用纯CSS实现，核心是结合CSS Grid的自动填充特性和clamp()、floor()这些CSS数学函数，精准控制单元格的尺寸范围和行列数量。

具体代码 #

/* 基础重置，确保无默认边距，视口占满 */
html, body {
  margin: 0;
  height: 100%;
  box-sizing: border-box;
}

#grid {
  height: 100vh;
  width: 100vw;
  display: grid;
  /* 列规则：自动填充，单元格宽度限制在180px-359px，同时适配视口列数 */
  grid-template-columns: repeat(auto-fill, minmax(clamp(180px, calc(100vw / floor(100vw / 180px)), 359px), 1fr));
  /* 行规则和列完全一致 */
  grid-template-rows: repeat(auto-fill, minmax(clamp(180px, calc(100vh / floor(100vh / 180px)), 359px), 1fr));
  /* 自动填充空隙，确保网格完全占满视口 */
  grid-auto-flow: dense;
}

/* 单元格占满网格单元 */
#grid .cell {
  width: 100%;
  height: 100%;
}

/* 图片自适应填充单元格，保持比例 */
#grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

关键逻辑说明 #

• floor(100vw / 180px)：计算当前视口宽度能容纳多少个最小尺寸（180px）的列，取整数结果作为列数基准
• calc(100vw / 列数)：得到每个单元格的基础宽度，再用clamp()限制在180px（最小）到359px（最大）之间
• 当视口宽度/高度不足180px时，clamp()的最小值会生效，但CSS Grid会自动让单元格占满整个视口空间（因为容器本身是100vw/100vh）
• grid-auto-flow: dense：防止网格出现空隙，确保单元格填满整个视口

兼容性说明 #

floor()和clamp()都是CSS数学函数，现代主流浏览器（Chrome、Firefox、Safari 15+、Edge）都支持，如果需要兼容更老的浏览器，可能需要调整实现逻辑，但目前绝大多数场景下没问题。

关于JS方案 #

你提到的JS方案确实更灵活，尤其是需要精细控制跨行/跨列的场景——比如当视口缩小到某个阈值，让单个单元格占满多行多列，保证图片有足够的显示区域。实现思路也很简单：监听resize事件，计算当前视口能容纳的行列数，动态给单元格添加grid-row/grid-column属性来调整跨度。

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