纵横比框在CSS网格中稍微偏移

我想用css网格制作一个图像网格，所有的图像都是不同大小的正方形

我偶然发现了一篇关于css技巧的文章：

在他们的照片上，我注意到1/1比例的正方形网格总是比宽高4倍

我想不出如何移除这些4px

.grid{
显示：网格；
网格模板柱：1fr 1fr 1fr；
放置项目：开始；
}
.grid>*{
背景：橙色；
宽度：100%；
}
.grid>[style^='--aspect ratio']：：之前{
内容：“；
显示：内联块；
宽度：1px；
身高：0；
填充底部：计算值（100%/（var（--纵横比））；
垂直对齐：底部；/*新*/
}

2/1
3/1
1/1

伪元素设置为

显示：内联块之前的
：
。这将激活基线对齐，从而打破1:1的比例。将
垂直对齐：底部
添加到伪元素。将
：：before
伪元素设置为
显示：内联块
。这将激活基线对齐，从而打破1:1的比例。向伪元素添加
vertical align:bottom
。