Html 网格项上的“调整大小”属性会导致其他网格项重叠

我有一个CSS网格，它被设置为

自动填充列，以便在一行中显示尽可能多的项目

这是通过：
网格模板列：重复（自动填充，最小值（10em，1fr））

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

resize: both;
overflow: auto;

这在基本级别上起作用，但当水平调整大小时，内容将重叠/延伸到相邻的网格项上：


垂直调整大小时，下面的行会向下推，因此没有重叠：

这也是我想要的行为。

我知道这可能与对列使用
自动填充
有关，因为当明确定义轨迹时，拉伸在两个轴上的作用相同


.grid{
显示：网格；
网格间距：1rem；
网格模板列：重复（自动填充，10em）；
/*网格模板列：重复（自动填充，最小值（10em，1fr））*/
}
.grid>div{
背景色：#eeeeff；
填充：0.5雷姆；
}
.调整大小{
调整大小：两者；
溢出：自动；
}

调整我的大小
项目
项目
项目
项目
项目
项目
项目
您可以使用来实现这一点：


.grid{
显示器：flex；
柔性包装：包装；
}
.grid>div{
边框：1px纯红；
宽度：150px；
}
.grid>div{
背景色：#eeeeff；
边缘：1米；
填充：10px；
}
.调整大小{
调整大小：两者；
溢出：自动；
边框：1px纯红；
}

调整我的大小
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
按照您定义的方式，调整大小对项目有效，但对列轨迹无效。这就是为什么在水平调整大小时会看到重叠。根据
网格模板列
规则1，列固定到位

使列轨迹与项目一起调整大小的唯一方法是将列设置为
自动
（基于内容的大小调整），但这不能与
自动填充
或
自动调整
2共存

在垂直方向上没有这种调整大小的问题，因为您没有定义任何行。因此，网格默认为
网格自动行：auto
（同样是基于内容的大小调整），并且项目和行轨迹的大小协调调整

但由于需要水平环绕，因此无法对列使用此技术。这显然是网格布局的一个限制

请尝试flexbox，在这种情况下它不是一个很好的选择（特别是因为它仍然不支持
gap
property3），但它可能会让您离目标更近一步


.grid{
显示器：flex；
柔性包装：包装；
}
.grid>div{
宽度：10em；
保证金：5px；
背景色：#ccc；
填充：0.5雷姆；
}
.调整大小{
调整大小：两者；
溢出：自动；
边框：1px纯红；
}

调整我的大小
项目
项目
项目
项目
项目
项目
项目
您只需要在网格中吗？或者我可以使用flex吗？@Manjuboyz如果它有效，flex就可以了。理想情况下，如果可能，水平推送的内容将流向下一行，而不是增加页面的宽度。这样做是因为高度是一个变量，这意味着我们需要一个可变的宽度来水平执行相同的操作，这将阻止自动填充，在网格中，您正在创建列/行，用于放置元素，而不是简单地对齐元素。到目前为止，还没有办法确定这些列/行的目标。@Alfie，正如我在回答中所说的，你可以使用css来改变位置和大小，但实际的效果是你想要的。让我知道。我刚刚也验证了它的响应能力，它工作正常！让我知道，如果它满足您的业务！谢谢你的回答，很好，但不是我所需要的。太多的网格行为丢失了，这破坏了我的设计（具体来说，列大小的minmax（）及其在调整页面大小时的缩放）。。。我看到的问题是
网格模板列：
这使单元格无法移动@Alfie现在检查答案，我可以通过给这些单元格加上宽度使其变得干净，并且再次移动在使用
网格时也是一样的，所以据我回忆，你不能期望更多。这是我担心的答案，但它很好地解释了原因。非常感谢。