Css Squares - On Resize

I want to built a website with with 6 squares. 3 in the first row and 3 squares in second row 2. If I resize my window this squares must be larger and always adapt themselves to 10

Solution 1:

Like this may be
The only issue you might have is setting them to be square as the width is a variable you can't set it to the same in the CSS. Might need some jQuery to enforce that. Something like this... untested:

$('.box').each(function(){
$(this).height($(this).width());
});

#container {width: 90%;}
.box {float: left; display: block; background: #c00; color: #fff; text-align: center; width: 30%; margin: 0 5% 5% 0;}
.box.last {margin: 0 0 5% 0;}
.clear {clear: both;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<!-- row 1 -->
<div class="box">box 1</div>
<div class="box">box 2</div>
<div class="box last">box 3</div>

<div class="clear"></div>
<!-- row 2 -->
<div class="box">box 4</div>
<div class="box">box 5</div>
<div class="box last">box 6</div>
</div>