使用自动填充列时可调整大小的CSS网格项目

Question

我有一个CSS网格，它设置为auto-fill列，以在一行中显示尽可能多的项目。

这是通过：grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));

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

resize: both;
overflow: auto;

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

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

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

我知道这很可能与对列使用auto-fill有关，因为在明确定义轨道时，拉伸在两个轴上都相同。

CSS

.grid {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
}
.grid > div {
  background-color: #eeeeff;
  padding: 0.5rem;
}
.resize {
  resize: both;
  overflow: auto;
  border: 1px solid red;
}

HTML

<!DOCTYPE html>
<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>
  </body>
</html>

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或auto-fit共存。

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

当然，由于您希望水平环绕行为，因此不能对列使用此技术。显然，这是网格布局的限制。

请尝试使用flexbox，这不是一个很好的选择（特别是因为它仍然不支持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;
}

<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>

jsFiddle demo

更多详细信息：

使用自动填充列时可调整大小的CSS网格项目

问题描述投票：1回答：2

2个回答

jsFiddle demo

最新问题

使用自动填充列时可调整大小的CSS网格项目

问题描述 投票：1回答：2

2个回答

jsFiddle demo

最新问题

问题描述投票：1回答：2