Question

我有一个CSS网格，该网格设置为0 Collection of numbers are 002 Collection of numbers are 003 Collection of numbers are 005 1 53 236 96 2 20 325 23 3 56 63列，以在一行中显示尽可能多的项目。

此操作可通过以下方式完成：<> <Button variant="contained">Button 1</Button> <Button variant="contained">Button 2</Button> <Button variant="contained">Button3</Button> </>

我希望能够调整尝试使用的所选网格项目的大小：

auto-fill

这在基本级别上有效，但是当水平调整大小时，内容将在相邻的网格项目上重叠/拉伸：

垂直调整大小时，下面的行将向下推送，因此不会出现重叠：

这也是我也想要水平的行为。

我知道这可能与在列上使用grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));有关，因为在明确定义轨道时，拉伸在两个轴上都相同。

resize: both;
overflow: auto;

auto-fill

JSFiddle

Answer 1

您可以使用flex来实现：

.grid {
  display: flex;
  flex-wrap: wrap;
}

.grid>div {
  border: 1px solid red;
  width: 150px;
}

.grid>div {
  background-color: #eeeeff;
  margin: 1em;
  padding: 10px;
}

.resize {
  resize: both;
  overflow: auto;
  border: 1px solid red;
}

<html>

<body>
  <div class="grid">
    <div class="resize">Resize Me</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
  </div>
</body>

</html>

Answer 2

按照定义的方式，调整大小适用于项目，但不适用于列轨道。这就是为什么在水平调整大小时会看到重叠的原因。列根据grid-template-columns规则¹固定在适当的位置。

使列轨道随项目调整大小的唯一方法是，如果将列设置为auto（基于内容的大小），但这不能与auto-fill或{{ 1}} ²。

因为没有定义任何行，所以在垂直方向上没有此大小调整问题。因此，网格默认设置为auto-fit（再次基于内容的大小调整），并且项目和行轨道的大小会协调一致。

但是，由于要水平包装，因此不能对列使用此技术。显然，这是网格布局的限制。

请改用flexbox，在这种情况下，这不是一个很好的选择（特别是因为它仍然不支持grid-auto-rows: auto属性³），但它可能会让您迈出一步更接近您的目标。

gap

.grid {
  display: flex;
  flex-wrap: wrap;
}

.grid > div {
  width: 10em;
  margin: 5px;
  background-color: #ccc;
  padding: 0.5rem;
}

.resize {
  resize: both;
  overflow: auto;
  border: 1px solid red;
}

jsFiddle demo

参考：

调整网格项目的大小属性会导致其他网格项目的重叠

2 个答案:

jsFiddle demo