1px border around uneven amount of divs
<p>I'm trying to solve an issue which has plagued me for so long. I'm attempting to create the following with css:</p>

<p><a href="https://gyazo.com/c8ae39ebc4795027ba7c1067a08d3420" rel="nofollow">https://gyazo.com/c8ae39ebc4795027ba7c1067a08d3420</a></p>

<p>There is an uneven amount of divs which I currently have styled like so:</p>

<pre><code>.box{
    background-color: grey;
    float: left;
    width: 33.33%;
    border: 1px solid black;
}
</code></pre>

<p>I am attempting to re-style the divs in the middle using nth-child but it's making the divs go into weird orders and just feels really messy. Is there an easier way?</p>

<p>Codepen for roughly what I'm trying to do:</p>

<p><a href="http://codepen.io/anon/pen/RrqNzM" rel="nofollow">http://codepen.io/anon/pen/RrqNzM</a></p>

<p>Thanks.</p>