Html 创建自动缩放的固定单元大小栅格

我想在我的网站上创建一个库存视图。基本上应该是这样的：

请注意，网格的宽度（元素的倍数）始终根据设备的屏幕大小进行调整。此外，网格容器应始终自动适应所选网格宽度的宽度。
我曾尝试使用css网格来实现这一点，尽管我不知道如何让css网格根据屏幕大小自动确定列数

然后我尝试为每个图像设置一个固定的大小，让HTML自然分页符处理它：

这实际上是可行的，但在左侧尺寸上，您可以清楚地看到栅格容器边距大于右侧，因为浏览器不会根据最佳列数调整容器。 下面是关于我是如何做到这一点的代码（在react中制作，但这对这个问题并不重要）：

render（）{
常量gridCSS={
显示：“块”，
}
var x=Array.from（数组（99）.keys（））
返回(
{x.map（（a）=>(
)
)
}
);
}
}

---

有没有比这更好的方法来创建具有固定大小elmenets的库存视图？如果没有，我如何调整网格容器以始终适合最接近的元素倍数？

您需要

显示：网格

，这为您的解决方案提供了问题

我添加了

网格模板列：repeat（自动填充，80px）

，因此它会根据视口的宽度创建宽度为80px的列。repeat函数的第二个参数不能是

1fr

！如果将其指定为

1fr

或任何其他fr值，则它将不起作用。您可以在此处使用rem、%和em等，而不是px。但是你不能在这里使用fr单位，因为它不会给你想要的结果

栅格自动行：80px

此属性确保每当为栅格创建新栅格时，其高度始终为80px。因此，无论浏览器自动生成多少行，它们的高度始终为80px。

grid gap:10px

，此属性确保每个网格项之间保持

10px

然后是使网格项正好位于网格中心的主属性，

justify content:center

。此属性使整个栅格在水平轴上对齐

.grid{
显示：网格；
网格模板列：重复（自动填充，80px）；
网格自动行：80px；
栅隙：10px；
证明内容：中心；
}

非常感谢，这已经差不多完美了。但有没有办法确保网格容器始终根据其内容调整其宽度和高度？例如，在您的代码笔中，使网格div在左、右、上和下始终具有10 px的边距？是的，它确实具有使用

网格模板列：repeat（auto fill，minmax（80px，1fr））

和

网格自动行：auto

（此自动行是默认行为）的功能，但第一个属性使用1fr作为最大宽度，这意味着网格项将始终占用可用的可用空间，如果可用，则其他项将保持至少80 px的宽度，但正因为如此，网格将占用整个空间，并且网格左右两侧的边距（不是真正的边距）将不均匀。网格间距不是边距，但是可以说它们是网格项之间的沟，网格项只会出现在网格项之间，而不会出现在网格项周围。您可以使用其他值，如rem、px、%等

  render() {
    const gridCSS = {
        display:"block",
    }

    var x=Array.from(Array(99).keys())
    return (
        <div style={gridCSS}>
        
        
            {x.map((a)=> (
                    <img src="//placekitten.com/80/80" style={{border:" 2pt inset #0ff"}}/>
                )
            )
            }
        
        </div>
    );
  }
}