如何在两个宽度或跨全宽度之间制作CSS网格项？

Question

我将 x 数量的网格项放入网格容器中。但对于这个例子，让我们说 two 网格项。

每个网格项应在 300px-600px 之间，取最大值，并在视口变小时缩小到最小值 300px，直到它无法容纳在一行中并分成两行，宽度为 100%。

现在发生的情况是，当视口到达行上的网格项堆叠点时，它不会跨越整个宽度。

所以类似：

.container {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(300px, 600px);
}

.grid-item {
 ...
  ...
 height: 150px;
 
}

当视口很大时：

缩小：

出现以下问题：

1. 它保持在 600 像素并且永远不会缩小到 300 像素。
2. 当它分成两行时，它不会跨越整个宽度。

如何做到这一点？

Answer 1

尝试弹性盒！

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.grid-item {
  min-width: 300px;
  flex-grow: 1;
  flex-shrink: 1;
}

仅在确实需要时才添加最大宽度，否则最后一项的末尾可能会有空白空间

Answer 2

您可以将 grid-template-columns: max-content; 添加到网格布局中。