CSS Grid图片无法缩放：minmax属性使用疑问求助

问题描述 #

使用CSS Grid布局时遇到图片无法缩放的问题，怀疑是对minmax()属性理解有误。预期网格项会根据数量自动缩放填满网格，但实际网格项始终保持最小值，甚至溢出父元素.wrapper。

相关代码

.grid {
  display: grid;
  align-content: center;
  justify-content: center;
  /* flex-shrink: 0; */
  grid-template-columns: repeat(auto-fit, minmax(10vw, 1fr));
  gap: 1em;
  width: 100%;
  height: 80%;
}

.image {
  display: flex;
  background-size: cover;
  border: solid .5vh black;
  /* overflow: auto; */
  aspect-ratio: 16/9;
}

.image:before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  padding-bottom: calc(9/16 * 100%);
}

.wrapper {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: calc(100vw - 4vh);
  height: calc(100vh - 4vh);
  margin: 2vh;
}

问题根源 #

• justify-content: center的限制：.grid中设置的这个属性会让网格容器在有剩余空间时，将整个网格模块居中，而非让网格项拉伸填充剩余空间。auto-fit配合minmax()的缩放逻辑需要网格项能分配容器的剩余空间，这个属性直接阻断了这个过程，导致网格项只能维持minmax定义的最小尺寸。
• 网格容器空间利用受限：.wrapper是flex容器且设置了justify-content: center，即使.grid设了width:100%，也会被父元素的居中逻辑限制，无法占满可用宽度，进一步导致网格项没有拉伸的空间。

修复方案 #

• 移除.grid中的justify-content: center和align-content: center，让网格项自动填充容器可用空间：

.grid {
  display: grid;
  /* 移除这两个干扰属性 */
  /* align-content: center; */
  /* justify-content: center; */
  grid-template-columns: repeat(auto-fit, minmax(10vw, 1fr));
  gap: 1em;
  width: 100%;
  height: 80%;
}

• 如果需要网格整体在.wrapper中居中，保留.wrapper的align-items: center和justify-content: center即可，无需给.grid添加对齐属性，确保.grid占满.wrapper的可用空间后，网格项会自动根据数量缩放。

补充：minmax(min, max)的正确逻辑是：网格项宽度不会小于min值，当容器有剩余空间时，会拉伸到max值（这里1fr表示按比例分配剩余空间），但前提是网格容器允许网格项去分配剩余空间，justify-content类的对齐属性会破坏这个机制。

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