I am working on a web app that will generate an NxN grid based on the user's selection of N. I want the total width of the grid to be relative (ie 100% of the available space) so that users can print on various paper sizes.
I can easily calculate the width of the squares in the grid by % (ie: 100%/N), but I am having issues calculating the height. The height of a web page is always going to be infinite unless I artificially limit it which, like I said, I don't want to do.
How can I make the squares in my grid be square versus rectangular when the height and width constraints of my grid are dynamic and not square?
There are 2 main techniques to keep the aspect ratio of a responsive element, using padding and vw units :
(for a complete solution for a responsive grid of squares, you can see this answer)
You can use vw
units to make your elements square and responsive (viewport units on MDN).
1vw = 1% of viewport width
so you can set the height of the elements according to the width of the viewport (or height with vh
units).
Example with a 4x4 grid :
body{
margin:0;
display:flex;
flex-wrap:wrap;
justify-content:space-around;
}
div{
width:23vw; height:23vw;
margin:1vw 0;
background:gold;
}
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
The same behaviour can be achieved sizing the element accoring to the viewport height usin vh
units.
Padding is calculated according to the containers width so you can use it to set the height of block according to it's width.
Example with a 4x4 grid :
.wrap {
width:80%;
margin:0 auto;
}
.wrap div {
width:23%;
padding-bottom:23%;
margin:1%;
float:left;
background:gold;
}
<div class="wrap">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>