40

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?

1
  • 1
    The real problem is not the size of the squares: that is simply (height/n). The problem is setting the total height of the grid to the same as it's width. It's tricky, without either making some fixed-size assumptions, or using some form of scripting. Apr 16, 2010 at 7:51

4 Answers 4

53

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)

Using vw units

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.


Using padding

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>

3
  • 7
    this is fine as long as you realise that vw and vh are relative to the size of the viewport, not any given container (unfortunately)
    – frumbert
    Oct 15, 2014 at 6:40
  • 4
    @frumbert I edited my answer with a solution based on the width of the container ("Padding technique")
    – web-tiki
    Oct 15, 2014 at 7:59
  • 3
    that's an awesome hack! programmers for the win!!
    – quemeful
    May 11, 2016 at 12:46
28

To make a div a square is pretty easy with CSS. You set a width, let's say 50%. Then you add a padding-bottom of the same value:

div {
width: 50%;
padding-bottom: 50%;
}

and it will stay square whenever you resize the window.

.

.

You can do this with any side ratio you want, if you want the box to be 16:9 you calculate:

9/16= 0.56

which you then multiply by the width of your element (in this case 50%(=0.5)), so:

9/16*0.5= 0.28 = 28%

6
  • I was looking for a pure css way to do this, thank you!
    – aclave1
    Mar 3, 2017 at 0:36
  • Don't work in Edge. :/ jsfiddle.net/836popre/3
    – tenhobi
    Jun 15, 2017 at 18:27
  • 2
    Beautiful solution, needs to be the answer. Sep 7, 2018 at 18:05
  • 1
    FYI, I used this solution to maintain a dynamic perfect circle, but I needed to explicitly set height: 0 for it to work at all. Sep 25, 2018 at 0:02
  • Unfortunately this seems to break when max-width is set, ie max-width: 200px;;
    – clayRay
    Sep 1, 2020 at 0:13
26

This is un-tested, I do not know of how to do this in CSS only, I would use jQuery.

$('div').height($('div').width());
2
  • I didn't know JQuery at the time but once I learned it, this was easy enough. Thanks!
    – Nate
    Dec 29, 2010 at 21:56
  • 1
    this will fail if the page get resized. Dec 5, 2020 at 12:43
-2

The above solution doesn't preserve area - this one is better

        //@param {jQuery} div 
        function makeSquare(div){
            //make it square !
            var oldDimens = {
                h : div.height(),
                w : div.width()
            };
            var area = oldDimens.h * oldDimens.w;
            var l = Math.sqrt(area);
            div.height(l).width(l);
        }
1
  • I don't believe preserving area is relevant. The OP is wanting to no how to make an element square based on its width. Changing this width is kind of defeating the purpose. -1
    – Jon P
    Dec 11, 2012 at 5:51

Not the answer you're looking for? Browse other questions tagged or ask your own question.