自动调整网格元素的大小，以将网格保持在父 div 内

Question

有没有一种方法可以自动调整网格元素的大小，以确保整个网格适合父级 div 且不会溢出？

我一直在使用媒体查询和多个网格模板列条目来尝试选择适当的值，以便网格填充父 div 中尽可能多的可用空间，并且看起来还算不错。

网格嵌套在 .wrapper 内。我读到父 div 需要定义宽度和高度，以便子 div 知道要保留在什么范围内而不是百分比值。

.wrapper {
  height: calc(100vh - 4vh);
  width: calc(100vw - 4vh);
  display: flex;
}

网格 CSS 示例

.grid {
  display: grid;
  gap: 1vh;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

.image {
  background-size: cover;
  display: flex;
  height: 100%;
  width: 100%;
  margin: 0;

}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(10vh, 1fr)); 
  }
}

Answer 1

在这种情况下不需要媒体查询。问题是您正在使用

vh

定义网格列/间隙，它定义相对于浏览器窗口大小的高度。当浏览器窗口将高度拉伸到超出包装元素的范围时，这可能会导致溢出。

为了避免这种情况，最好直接定义与包装元素大小相关的内容。考虑将

vh

中的

grid-gap

切换为例如

rem

，并从媒体查询中删除

grid-template-columns

并使用

nfr

而不是其当前值来定义它（将

1fr

放入

minmax()

实际上没有意义，因为

1fr

已经定义为相对值）到其父元素）。