CSS- Responsive full width grid of square divs

Question

I'm trying to create a grid of square divs. This is what I tried:

HTML:

<div>A</div>
<div>B</div>
<div>C</div>

CSS:

div{
    width:50vw;
    height:50vw;
    display:inline;
    float:left;
}

(JSFiddle)

But instead of getting two columns, the divs display one below the other..

Does anyone know how to solve this? Thanks.

Answer 1

Don't use 50vw as the scrollbar is not included in the calculations. Use 50% instead.

There is a very slight difference but it's one that your users are unlikely to notice.

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
div {
  width: 50%;
  height: 50vw;
  float: left;
}
#a {
  background-color: red;
}
#b {
  background-color: blue;
}
#c {
  background-color: green;
}
#d {
  background-color: yellow;
}

<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
<div id="d">D</div>