CSS | Javascript：具有动态高度和宽度的缩放或类似Messenger的视频播放器

在zoom会议或messenger会议中，每个参与者的视频容器都会动态测量高度和宽度。考虑到下面的图片，假设蓝色盒子是主容器-如果只有一个参与者，我需要给他/她（视频播放器1）完整的宽度和高度

如果有两名参与者，他们采用的高度和宽度如图2所示；如果有三名参与者，他们采用的高度和宽度如图3所示，依此类推

有没有办法只使用css来实现这一点？或者有图书馆可以这样做吗

我的情景：假设我是一名教师。有10个学生报名参加我们班。当我开始视频会议时，在学生视图中-我创建3x3网格。但是当有人参加那个会议时，我想根据主容器给出他/她整个宽度和高度，因为他/她是唯一的参与者。其他参与者的网格将保留在尚未加入的容器上。如果我滚动底部，我可以看到。如果另一个学生加入，我想给出如图2所示的高度和宽度。如果另一个学生像pic-3一样加入

我可以用javascript来做，但我想用css来做

谢谢

---

是的，我可以使用CSS网格完成。其中蓝色框可以是一个div标记，您将在其中指定网格。网格最好的地方是自动调整。 css Flexbox也可以实现同样的效果。我想对于您的用例来说，Flexbox更合适。

---

用户如何登录此聊天？@SimoneRossaini更新说明。他们通过点击一个按钮加入，老师正在倾听每一个新的参与者。我的问题不是定位，我的问题是动态设置高度和宽度。