Video Playlist as a Grid of Videos

If you have a large number of videos in your playlist, it may make sense to use a grid layout to display all available video simultaneously

When you float objects in CSS, the browser arranges elements first horizontally then vertically. When we fill a container with a bunch of equally sized objects and float them left, we get a nice grid of images.

However, if the objects have variable heights, the results are much more difficult to predict. Instead of a nice tight grid, we get something that tends to be fairly scattered.

Our grid layout manager works by placing elements in optimal position based on available vertical space. You’ve probably seen it in use all over the Internet such as Pinterest.