Designing for Dynamic Display: How to Create a Self-Adjusting Layout

The idea

In this article, we will see how to create a self-adjusting video call app layout with HTML, CSS, and JavaScript in 5 minutes! 🚀

The objective is to scale the layout blocks proportionally to the screen depending on the number of participants on the video call.

The minimal setup

You can either walk through the minimal setup steps below or access the codepen with the premade setup at the end of this section.

HTML

Create a single wrapper element and as many child tile elements as you may need. Please note that the id and class names need to match the JavaScript that will be shown below.

You can add as many .video-tile elements as you wish.

CSS

The flex-wrap is the key for this layout to work, also instead of aspect-ratio, you can set a fixed size for the elements if you wish.

JavaScript

Using a combination of Math.ceil and Math.sqrt we can predict the desired number of elements in a row on the self-adjusting canvas. Thanks to this information, we can compute the value for each element with respect to how many elements we want to see in a single row (and subtract the gap between elements).

Result

That's it for the minimal setup, you should have a ready self-adjusting layout with the number of tiles that you specified in the HTML section.

Codepen with premade setup

The dynamic setup

I've also prepared a more advanced sandbox where you can play with a different number of tiles through input dynamically and see how the self-adjusting layout behaves in action. 😎

Congrats

That's it!
You just created a self-adjusting video-app-like layout that allows you to add as many elements as you want without having to redo a specific CSS.

I hope you found it useful and easy to implement. 🤝

Bonus

We use this exact layout in production with our live video backstage app!

To find out more about the video backstage solution at Swapcard visit https://release.swapcard.com/introducing-speaker-backstage-3yviJa