CSS Brick Layout with nth-child

Layout a grid of elements in a brick format using css only

HTML

<div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div>

CSS

body {
    font-family:arial, san-serif;
    font-weight:bold;
}

.box {
    width:25%;
    background:#e5effc;
    margin:10px;
    float:left;
    text-align:center;
    padding:20px;
    border-radius:5px;
}

.box:nth-child(6n+6),
.box:nth-child(6n+4) {
    width:50%;
    background:green;
}