具有相同宽度和高度的Html网格模板列

我需要在网格中显示视频元素，其中一些网格没有视频元素，一些网格有视频元素，所有时间每个网格都应该具有相同的宽度和高度

但在下面的示例中，第二个和第三个网格的宽度不同，其余网格的宽度相同。 如果我把每个网格和视频元素放在一起，那么每个网格都有相同的大小，如果移除每个视频元素，那么每个网格都有相同的尺寸。问题是当一些网格中有视频元素时。我怎样才能解决它

身体，
html{
宽度：100%；
身高：100%；
保证金：0；
填充：0
}
.网格容器{
显示：网格；
网格模板列：自动；
网格模板行：自动；
栅隙：8px；
背景色：#fff；
填充：1px；
}
.表格项目{
背景色：#fafafa；
文本对齐：居中；
填充：0px0；
字体大小：30px；
边框：0px实心#d2d2d7；
边界半径：5px；
}

更新

网格容器中的以下行：

网格模板列：1fr 1fr 1fr 1fr；

这将设置4列宽度相等的列。关于“分数单位”或“灵活长度”单位。因此，您的完整代码可能如下所示：


body，
html{
宽度：100%；
身高：100%；
保证金：0；
填充：0
}
.网格容器{
显示：网格；
网格模板柱：1fr 1fr 1fr 1fr；
网格模板行：自动；
栅隙：8px；
背景色：#fff；
填充：1px；
}
.表格项目{
背景色：#fafafa；
文本对齐：居中；
填充：0px0；
字体大小：30px；
边框：0px实心#d2d2d7；
边界半径：5px；
}