html - 视频 session 像使用css网格的视频网格

Question

我正在尝试创建一个像网格一样的视频 session 。我正在尝试使用 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;
}

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

我有一个简单的布局解释如下(大屏设备左栏，移动设备右栏):

Answer 1

我不建议使用带有百分比的宽度和高度。这里重要的是尊重宽高比。

例子:
https://alicunde.github.io/Videoconference-Dish-CSS-JS/
代码:
https://github.com/Alicunde/Videoconference-Dish-CSS-JS
我今天已经解决了这个问题。首先我开始使用 CSS3 Grid，但结果没有考虑相机的纵横比。
然后我尝试了 Flex，但无法覆盖定义的表面。所以我创建了这个非常基本的脚本。
您需要的其余屏幕很容易开发。
手机版:

它很快(调整大小事件，加载事件):

原谅我的英语。