Video Conferencing like video grid using css grid

Question

I am trying to create a video conferencing like grid. I am trying using css-grid but somehow I am not being able to accomplish what I am looking for. The idea is simple, have a grid of videos on screen and paginate the videos to next page which doesn't fit in the first.

I tried using the following:

<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;
}

What I am looking for is some pointers/ hints/ any articles(didn't find anything useful) that point to the direction I want to go.

I have a simple layout as follows to explain (Left column for large screen devices, right column for mobile devices):

Answer 1

I do not recommend using widths and heights with percentages. The important thing here is to respect the aspec ratio.

Example:

https://alicunde.github.io/Videoconference-Dish-CSS-JS/

Code:

https://github.com/Alicunde/Videoconference-Dish-CSS-JS

I have solved this problem today. First I started using CSS3 Grid, but the result did not respect the aspect ratio of the cameras.

Then I tried Flex, but it is not possible to cover defined surfaces. So I have created this pretty basic script.

The rest of the screens you need are easy to develop.

Phone version:

It is fast (resize event, load event):

Excuse my English.