By Nate


2010-04-15 20:25:29 8 Comments

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?

4 comments

@web-tiki 2014-05-13 14:04:12

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>

@frumbert 2014-10-15 06:40:50

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)

@web-tiki 2014-10-15 07:59:07

@frumbert I edited my answer with a solution based on the width of the container ("Padding technique")

@quemeful 2016-05-11 12:46:56

that's an awesome hack! programmers for the win!!

@LeeCanvas 2014-10-19 20:38:54

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%

@aclave1 2017-03-03 00:36:33

I was looking for a pure css way to do this, thank you!

@tenhobi 2017-06-15 18:27:54

Don't work in Edge. :/ jsfiddle.net/836popre/3

@MarsAndBack 2018-09-07 18:05:52

Beautiful solution, needs to be the answer.

@MarsAndBack 2018-09-25 00:02:41

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.

@JackMahoney 2012-12-11 05:25:06

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);
        }

@Jon P 2012-12-11 05:51:15

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

@Christopher Altman 2010-04-15 20:39:52

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

$('div').height($('div').width());

@Nate 2010-12-29 21:56:16

I didn't know JQuery at the time but once I learned it, this was easy enough. Thanks!

Related Questions

Sponsored Content

38 Answered Questions

[SOLVED] How can I make a div not larger than its contents?

  • 2009-01-16 16:03:07
  • George Snider
  • 1366750 View
  • 1981 Score
  • 38 Answer
  • Tags:   html css width

33 Answered Questions

[SOLVED] How to make a div 100% height of the browser window

  • 2009-10-15 21:18:43
  • mike
  • 1898070 View
  • 2055 Score
  • 33 Answer
  • Tags:   html css height

33 Answered Questions

[SOLVED] Font scaling based on width of container

22 Answered Questions

[SOLVED] Make the cursor a hand when a user hovers over a list item

  • 2010-06-21 19:45:44
  • user246114
  • 1907194 View
  • 1897 Score
  • 22 Answer
  • Tags:   css

26 Answered Questions

[SOLVED] Make a div into a link

31 Answered Questions

[SOLVED] Make a div fill the height of the remaining screen space

  • 2008-09-18 05:06:17
  • Vincent McNabb
  • 937164 View
  • 1792 Score
  • 31 Answer
  • Tags:   html css html-table

36 Answered Questions

[SOLVED] Use jQuery to hide a DIV when the user clicks outside of it

  • 2009-09-10 06:11:27
  • Scott Yu - Front-End UX
  • 701983 View
  • 945 Score
  • 36 Answer
  • Tags:   jquery html hide styling

21 Answered Questions

[SOLVED] Expand a div to fill the remaining width

7 Answered Questions

[SOLVED] Making a div vertically scrollable using CSS

  • 2012-03-14 17:56:08
  • Saswat
  • 1066262 View
  • 534 Score
  • 7 Answer
  • Tags:   html css

Sponsored Content