在CSS网格中保持旋转方形div的宽度和高度（响应解决方案）

我试图在设备之间使用CSS网格来保持正方形div的高度和宽度一致。我旋转了网格，试图制作一个“菱形”形状，但当屏幕调整大小时，这个形状会改变。当容器占据整个视口的高度和宽度时，如何在网格中保持一致的完美旋转正方形宽度和高度

.grid{
显示：网格；
网格模板列：重复（3，1fr）；
栅柱间隙：1米；
网格行间距：1米；
变换：旋转（45度）；
溢出：隐藏；
}
.grid>div{
边框：实心1px红色；
}
.集装箱{
宽度：100%；
}
.电网{
宽度：100%；
高度：100vh；
}

箱
箱
箱
箱
箱
箱
箱
箱
箱

由于要将元件旋转

45度

，因此宽度/高度需要遵循以下公式：

高度=宽度=50vh/cos（45度）=50vh/0.707

。您还需要调整

变换原点

，并添加一个小平移来校正位置：

.grid{
显示：网格；
网格模板列：重复（3，1fr）；
栅柱间隙：1米；
网格行间距：1米；
变换：translateY（-29%）旋转（45度）；
变换原点：左下角；
溢出：隐藏；
宽度：计算值（50vh/0.707）；
高度：计算（50vh/0.707）；
}
.grid>div{
边框：实心1px红色；
}
身体{
保证金：0；
溢出：隐藏；
}

箱
箱
箱
箱
箱
箱
箱
箱
箱

非常感谢您的详细回复，这很有效。