How to make a page template with a tiled video gallery?

Question

Layout

It is necessary to make the page template similar to the main page of ru.4game.com
There should be the same tile/table/container - which is correct?
With a video that starts when you hover over the cursor, with a splash image.
When you click on the video, the transition to the product category (woocommerce).
Since I have no experience in layout, I tried to do it using clumsy methods:
Create pages, display a category through a shortcode, replace page thumbnails with videos using the Featured Video Plus plugin, and use the Gridster tile constructor to display all this stuff using the Gridster shortcode on the page. But I don't know how in this case to start the video on hover and the splash image. And in general, I intuitively understand what can be done easier, but there is not enough knowledge.
I came to the conclusion that I need to create a new page template, but I have no idea how to layout it, that is, I roughly understand that I can ensure the same launch of the video as I need using html5, but how to make the structure / grid / table itself for these videos (only 10 pieces) I have no idea. Who can tell?

Answer 1

You need to flex (you can read about flex here ).