我需要在网格中显示视频元素，其中有些网格将没有视频元素，而一些网格将带有视频元素，每个网格都应始终具有相等的宽度和高度。
但是在下面的示例中，第二个和第三个网格具有不同的宽度，其余的宽度都相等。 如果我将每个网格与视频元素放在一起，那么每个网格的大小都相等，如果删除每个视频元素网格的尺寸相等。问题是当某些网格中包含视频元素时。我该如何解决它。
<!DOCTYPE html>
<html>
<head>
<style>
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-template-rows: auto auto;
grid-gap: 8px;
background-color: #fff;
padding: 1px;
}
.grid-item {
background-color: #fafafa;
text-align: center;
padding: 0px 0;
font-size: 30px;
border: 0px solid #d2d2d7;
border-radius: 5px;
}
</style>
</head>
<body style='background: #fff;'>
<div id='mainBg' class='grid-container' style='grid-auto-flow: row;margin-top:40px;height:calc(100% - 90px)'>
<div class="grid-item">
<div style="height: 100%; width: 100%;"> </div>
</div>
<div class="grid-item">
<div style="height: 100%; width: 100%;"> </div>
</div>
<div class="grid-item">
<div style=" height: 100%; width: 100%;"> </div>
</div>
<div class="grid-item">
<div style=" height: 100%; width: 100%;">
<video width="100%" height="100%" controls>
</video>
</div>
</div>
<div class="grid-item">
<div style=" height: 100%; width: 100%;">
<video width="100%" height="100%" controls>
</video>
</div>
</div>
</div>
</body>
</html>小提琴https://jsfiddle.net/8oqp5kys/
更新.grid-container中的以下行：
grid-template-columns: 1fr 1fr 1fr 1fr;
这将设置 4 列等宽。关于"分数单位"或"灵活长度"单位的一些进一步阅读。因此，您的完整代码可能如下所示：
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto auto;
grid-gap: 8px;
background-color: #fff;
padding: 1px;
}
.grid-item {
background-color: #fafafa;
text-align: center;
padding: 0px 0;
font-size: 30px;
border: 0px solid #d2d2d7;
border-radius: 5px;
}<body style='background: #fff;'>
<div id='mainBg' class='grid-container' style='grid-auto-flow: row;margin-top:40px;height:calc(100% - 90px)'>
<div class="grid-item">
<div style="height: 100%; width: 100%;"> </div>
</div>
<div class="grid-item">
<div style="height: 100%; width: 100%;"> </div>
</div>
<div class="grid-item">
<div style=" height: 100%; width: 100%;"> </div>
</div>
<div class="grid-item">
<div style=" height: 100%; width: 100%;">
<video width="100%" height="100%" controls>
</video>
</div>
</div>
<div class="grid-item">
<div style=" height: 100%; width: 100%;">
<video width="100%" height="100%" controls>
</video>
</div>
</div>
</div>
</body>