Resize property on grid items results in overlap of other grid items

问题

I have a CSS grid that is set to auto-fill the columns, to display as many items on a row as will fit.

This is done with: grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));

I would like to be able to resize selected grid items, which I am trying with:

resize: both;
overflow: auto;

This works at a basic level, but the content will overlap/stretch over adjacent grid items when resized horizontally:

When resized vertically, the rows below are instead pushed down, so there is no overlap:

This is the behaviour I want horizontally too.

I understand this is likely to do with using auto-fill for the columns, as when tracks are explicitly defined the stretching works the same on both axes.

.grid {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fill, 10em);
  /* grid-template-columns: repeat(auto-fill, minmax(10em, 1fr)); */
}

.grid>div {
  background-color: #eeeeff;
  padding: 0.5rem;
}

.resize {
  resize: both;
  overflow: auto;
}

<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

回答1:

You can use flex to achieve this:

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

回答2:

The way you have it defined, the resize works on the items, but not on the column tracks. That's why you're seeing the overlap when resizing horizontally. The columns are fixed in place, based on the grid-template-columns rule ¹.

The only way to make the column tracks resize with the items would be if the columns were set to auto (content-based sizing), but this cannot co-exist with auto-fill or auto-fit².

You don't have this resizing problem in the vertical direction because you haven't defined any rows. Therefore, the grid defaults to grid-auto-rows: auto (again, content-based sizing), and the items and row tracks resize in harmony.

But since you want horizontal wrapping, you can't use this technique for the columns. It's clearly a limitation in grid layout.

Try flexbox instead, which isn't a great alternative in this case (especially because it still doesn't support the gap property³), but it may get you a step closer to your goal.

.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

References:

Aligning grid items across the entire row/column (like flex items can)
Why doesn't min-content work with auto-fill or auto-fit?
How to set gaps (gutters) in a flex container?, Setting distance between flex items

来源：https://stackoverflow.com/questions/61252965/resize-property-on-grid-items-results-in-overlap-of-other-grid-items

标签

html

css

flexbox

css-grid