Html 如何将元素的高度调整为32的增量？

我在HTML页面中有一个div，它有一个重复的网格背景。我希望能够将文本和图像等内容放入div中，但要以32像素的增量调整大小，这样网格就不会被切断。我知道使用JavaScript可以做到这一点，但是否可以仅使用CSS做到这一点？

如果您事先知道需要占用多少空间，可以选择使用

calc

。现在，如果您不知道并希望动态计算，那么您将需要js或sass/less变量。 例如：

.container{
宽度：320px；
高度：320px；
背景颜色：蓝色；
}
.第一项{
宽度：计算（32px）；
高度：计算（32px）；
背景色：红色；
}
.第二项{
宽度：计算（32px*2）；
高度：计算（32px*2）；
背景颜色：黄色；
}
.第三项{
宽度：计算（32px*10）；
高度：计算（32px*10）；
背景颜色：橙色；
}

动态使用CSS是不可能的，但CSS网格确实为您提供了一些选择。我知道如何使用简单的JavaScript实现这一点，但这是一个很好的解决方案。