If you aim to create four rows explicitly, consider defining a row object like this:
<div class="row">
<div class="square quarter"></div>
<div class="square quarter"></div>
<div class="square quarter"></div>
<div class="square quarter"></div>
</div>
<div class="row">
<div class="square half"></div>
<div class="square half"></div>
</div>
<div class="row">
<div class="square half"></div>
<div class="square half"></div>
</div>
<div class="row">
<div class="square quarter"></div>
<div class="square quarter"></div>
<div class="square quarter"></div>
<div class="square quarter"></div>
</div>
To style the row, use display:block; with float:left or display:inline-block for the child elements; alternatively, use display:table with display: table-cell. The latter option eliminates concerns about clearing floats or removing whitespace between inlines. Check out this sample fiddle for reference: http://jsfiddle.net/fqdgfd9u/2/
Alternatively, if you prefer not to use a "row object," achieving the same layout is possible with inline-block or float:left. While not as tidy, it can still work. Here's a fiddle using display: inline-block: http://jsfiddle.net/mpq6cp7j/. For more specific guidance, provide additional details on your goal.