如何实现Grid模板列根据父div宽度动态调整每行列数？

媒体查询仅基于视口（屏幕/浏览器窗口）宽度触发，无法感知父容器的尺寸变化，所以会出现你遇到的问题。以下是两种可靠的解决方案：

方案一：CSS容器查询（Container Queries） #

这是原生CSS支持的、专门针对父容器尺寸的响应式方案，也是当前推荐的实现方式。

实现步骤： #

1. 先给父容器声明容器查询上下文，让它成为尺寸监听的目标：

.parent-container {
  container-type: inline-size; /* 声明基于内联方向（水平）的宽度作为查询依据 */
}

2. 针对.options-container编写容器查询，基于父容器的宽度调整网格列数：

/* 默认样式：父容器宽度较小时显示1列 */
.options-container {
  display: grid;
  grid-template-columns: 100%;
}

/* 当父容器宽度≥768px时，切换为2列布局 */
@container (min-width: 768px) {
  .options-container {
    grid-template-columns: 48% 48%;
    column-gap: 4%;
  }
}

无论屏幕尺寸多大，只要父容器的宽度达到阈值，对应的网格布局就会自动切换。

方案二：Grid自动适配布局 #

如果不需要精确的768px阈值，而是希望网格能根据父容器宽度自动调整列数，可以用Grid的auto-fit+minmax组合实现：

.options-container {
  display: grid;
  /* 每列最小宽度200px，最大占满可用空间，自动适配列数 */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  column-gap: 4%;
}

这种方式下，当父容器宽度不足以放下2个200px的列时，会自动切换为1列；宽度足够时则自动排列多列，完全不需要额外的查询规则。

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