Javascript 使网格及其项目调整大小以适合容器_Javascript_Css

Javascript 使网格及其项目调整大小以适合容器

javascript css

Javascript 使网格及其项目调整大小以适合容器,javascript,css,Javascript,Css,我正在尝试构建一个网格，该网格适合一个固定大小的容器。这意味着，如果我更改网格项目的数量（可以通过提示完成），那么这些项目将根据网格项目的数量变小或变大当前，网格溢出到容器外部。相反，我需要调整网格项的大小，以始终填充相同大小的容器，而不管网格项的数量如何我已经用JS构建了这个网格，我知道它的性能有点低，不推荐使用，但这是根据一个在线任务中的一组摘要我尝试了一些方法，包括在网格模板列和网格模板行上使用自动调整和自动填充，但这两种方法都不起作用。相反，它们似乎将网格布局完全拆分为一列我在这

我正在尝试构建一个网格，该网格适合一个固定大小的容器。这意味着，如果我更改网格项目的数量（可以通过提示完成），那么这些项目将根据网格项目的数量变小或变大

当前，网格溢出到容器外部。相反，我需要调整网格项的大小，以始终填充相同大小的容器，而不管网格项的数量如何

我已经用JS构建了这个网格，我知道它的性能有点低，不推荐使用，但这是根据一个在线任务中的一组摘要

我尝试了一些方法，包括在

网格模板列

和

网格模板行

上使用

自动调整

和

自动填充

，但这两种方法都不起作用。相反，它们似乎将网格布局完全拆分为一列

我在这里添加了一个JSFIDLE：

p、抱歉，如果不清楚，这是我的第一个StackOverflow问题。

删除：

对齐项目：居中；证明内容：中心；保证金：自动孩子们不会再缩小到中间的位置。@ G. CyRLRE我想让网格项目收缩到他们当前不在的单元中。更具体地说，他们没有收缩以适应容器，这是我正在寻找的行为。通过添加清晰尺寸解决了这一问题，并从尝试使用vh和vw切换到使用vh和vw。它尊重1em的网格间距，而不会缩小到其填充值？？在您最初提供的代码段中，vh/vw尺寸在哪里？删除：align items:center；证明内容：中心；保证金：自动孩子们不会再缩小到中间的位置。@ G. CyRLRE我想让网格项目收缩到他们当前不在的单元中。更具体地说，他们没有收缩以适应容器，这是我正在寻找的行为。通过添加清晰尺寸解决了这一问题，并从尝试使用vh和vw切换到使用vh和vw。它尊重1em的网格间距，而不会缩小到其填充值？？在您最初提供的代码片段中，vh/vw尺寸在哪里？？