Complete Grid 2

A way to prevent solitaire items in a row. http://www.heydonworks.com/article/tetris-the-power-of-css

by rulokc

HTML

<div class="container">
    <ul class="grid">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>    
</div>
<div class="container">
    <ul class="grid">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>    
</div>
<div class="container">
    <ul class="grid half">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>    
</div>

CSS

.container {
    width: 150px;
    float: left;
    margin-right: 10px;
    padding: 0;
}
.grid {
    margin: 0;
    padding: 0;
    border-collapse: collapse;
}
.grid li {
    width: calc(33.33% - 10px);
    height: 40px;
    background-color: #abe;
    list-style: none;
    float: left;
    border: 5px solid #fff;
}
.grid li:nth-child(3n+1):last-child {
    background-color: #0f0;
    width: calc(100% - 10px);
}
.grid li:nth-child(3n+2):last-child {
    background-color: #0f0;
    width: calc(66.66% - 10px);
}
.grid.half li:nth-child(3n + 1):nth-last-child(2), 
.grid.half li:nth-child(3n + 1):nth-last-child(2) + li {
   width: calc(50% - 10px);
}