html - 视频会议，如使用 css 网格的视频网格

问题描述

我正在尝试创建一个像网格一样的视频会议。我正在尝试使用 css-grid 但不知何故我无法完成我正在寻找的东西。这个想法很简单，在屏幕上有一个视频网格，并将视频分页到下一页，这不适合第一页。

我尝试使用以下内容：

<div className="videoContainer">
    <div className="videoWrapper">Cam 1</div>
    <div className="videoWrapper">Cam 2</div>
    <div className="videoWrapper">Cam 3</div>  
</div>

CSS

.videoContainer {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    border: 2px solid blue;
}
.videoWrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    border: 1px solid green;
}

我正在寻找的是一些指向我想要去的方向的指针/提示/任何文章（没有找到任何有用的东西）。

我有一个简单的布局如下来解释（左栏为大屏幕设备，右栏为移动设备）：