我将 x 数量的网格项放入网格容器中。但对于这个例子,让我们说 two 网格项。
每个网格项应在 300px-600px 之间,取最大值,并在视口变小时缩小到最小值 300px,直到它无法容纳在一行中并分成两行,宽度为 100%。
现在发生的情况是,当视口到达行上的网格项堆叠点时,它不会跨越整个宽度。
所以类似:
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 600px);
}
.grid-item {
...
...
height: 150px;
}
缩小:
出现以下问题:
如何做到这一点?
尝试弹性盒!
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.grid-item {
min-width: 300px;
flex-grow: 1;
flex-shrink: 1;
}
仅在确实需要时才添加最大宽度,否则最后一项的末尾可能会有空白空间
您可以将 grid-template-columns: max-content; 添加到网格布局中。