The calc function is a great way to size your elements.
How it works:
Calc() operates with values of identical units, as well as with values of different units.
You can set calc() as a value of any sizing properties, and you can also use them for angles.
It can be a life-savior in situations where you need responsiveness.
For example, you can use it like this:
height: calc(100vw / 10);
width: cacl(100vw / 10);
*NB: “vw” stands for Viewpot Width. 100vw = total width of your viewport.*
What this code does is that it gives you a responsive square div, the size of which is 1/10 of the viewport width. A square it is, a square it will be.
Here is an example of how I used it: a mosaic of the Eye of Sauron!
EDIT: Someone did it better than me, using several columns per row and Bootstrap4. See Jerome Legrand’s solution here.