CSS | Javascript：像视频播放器一样缩放或信使，具有动态高度和宽度

Question

In zoom conference or messenger meeting, every participant's video container take height and width dynamically. Considering bellow picture, suppose blue box is the main container - if there is only one participant i need to give him/her(video player 1) the full width and height.

If there are two participants, they take the height and width like pic-2 and if there are three participants, they take the height and width like pic-3 and so on..

Is there any way to do this using css only? Or is there any library to do this?

My scenario: Suppose i'm a teacher. There are 10 students enroll my class. When i start video conference, in student view - i create 3x3 grid. But when someone join that conference i want to give him/her the full width and height according to main container, cause he/she is the only participant. And other participant's grid will remain on the container who didn't join still. If i scroll bottom i can see that. If another student join i want to give the height and width like pic-2. And if another student join like pic-3....

I can do it using javascript, but i wanna do it with css.

Thank's.

Answer 1

Yes I can be done using CSS grid. Where the blue box can be a div tag where you will specify the grid. The best thing about the grid is auto adjusts. The same can also be achieved with css Flexbox. I guess for your use case Flexbox would be more appropriate. Link For Flexbox Guide Link For Grid Guide