How to make the height of div same as width to create responsive squares when using grid system?

Question

I'm using Skeleton boilerplate to create my grid. The grid I'm trying to achieve consists of 3 squares per row. I have tried making the height percentage (33.33%) but it still doesn't create a square. Thank you! :)

Answer 1

On CSS3 you will use vh unit, this is same at percentage unit, is relative, in this case to viewport height.

33.33% as same to 33.33vh and your box should adjust to view height of viewport.

View all Css Units.

example

.box{
  width: 100%;
  height: 33.33vh;
  }
.foo{background-color: red;}
.bar{background-color: purple;}
.na{background-color: blue;}

<div class='box foo'></div>
<div class='box bar'></div>
<div class='box na'></div>

These are Relative Unit on CSS.
Try one of them.