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

Question

我正在尝试创建一个像网格一样的视频会议。我正在尝试使用 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，但无法覆盖已定义的表面。所以我创建了这个非常基本的脚本。

您需要的其余屏幕很容易开发。

手机版：

速度很快（调整大小事件，加载事件）：

对不起，我的英语不好。