negative margins usage : columns

by abernier

HTML

<ol class="cols-3">
    <li class="col-1">1</li>
    <li class="col-1">2</li>
    <li class="col-1">3</li>
    <li class="col-1">4</li>
    <li class="col-1">5</li>
    <li class="col-1">6</li>
    <li class="col-2">7</li>
    <li class="col-2">8</li>
    <li class="col-2">9</li>
    <li class="col-2">10</li>
    <li class="col-2">11</li>
    <li class="col-2">12</li>
    <li class="col-3">13</li>
    <li class="col-3">14</li>
    <li class="col-3">15</li>
    <li class="col-3">16</li>
    <li class="col-3">17</li>
</ol>

CSS

.cols-3 .col-1,
.cols-3 .col-2,
.cols-3 .col-3 {display:block; width:33.3333%; line-height:3em; box-sizing:border-box;}

.cols-3 .col-1 {margin-left:0%;}
.cols-3 .col-2 {margin-left:33.3333%;}
.cols-3 .col-3 {margin-left:66.6666%;}
.cols-3 .col-1 + .col-2,
.cols-3 .col-2 + .col-3 {margin-top:-18em;}

/* decorative */
li:nth-child(odd) {background-color:whiteSmoke;}