Matrix lists

HTML

<ul class="matrix three-col custom">
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
    <li>Sit</li>
    <li>Amet</li>
    <li>Consectetur</li>
</ul>


<ul class="matrix two-col more-custom">
    <li style="float:left">Lorem</li>
    <li style="float:left">Ipsum</li>
    <li style="float:left">Dolor</li>
    <li style="float:right">Sit</li>
    <li style="float:right">Amet</li>
    <li style="float:right">Consectetur</li>
</ul>


<ul class="matrix four-col even-more-custom">
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
    <li>Sit</li>
    <li>Amet</li>
    <li>Consectetur</li>
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
    <li>Sit</li>
    <li>Amet</li>
    <li>Consectetur</li>
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
    <li>Sit</li>
    <li>Amet</li>
    <li>Consectetur</li>
    <li>Dolor</li>
    <li>Sit</li>
</ul>

CSS

/* Housekeeping */
*{ margin:0; padding:0; }
html{
    color:#333;
    padding:1em;
    font:0.75em/1.5 sans-serif;
}
ul{
    margin-bottom:1.5em;
}





/* Matrix object */
.matrix,
.matrix > li{
    border:1px solid transparent;
}
.matrix{
    list-style:none;
    margin-left:0;
    overflow:hidden; /* Clear floats */
    border-width:1px 0 0 1px; /* Top & left */
}
    .matrix > li{
        
        border-width:0 1px 1px 0; /* Right & bottom */
        -webkit-box-sizing:border-box;
           -moz-box-sizing:border-box;
                box-sizing:border-box;
}

    /* Columns */
    .two-col > li{
        width:50%;
    }
    .three-col > li{
        width:33.333%;
    }
    .four-col > li{
        width:25%;
    }
    .five-col > li{
        width:20%;
    }





/* Custom matrix */
.custom,
.custom > li{
    border-color:#ccc;
}
    .custom > li{
        padding:1em;
    }





/* More custom matrix */
.more-custom,
.more-custom > li{
    border-color:#BADA55;
}
.more-custom{
    color:#999;
}
    .more-custom > li{
        padding:0.5em;
    }





/* Even more custom matrix */
.even-more-custom,
.even-more-custom > li{
    border-color:#fff;
}
.even-more-custom{
    color:#fff;
}
    .even-more-custom > li{
        padding:1em;
        background-color:#09f;
    }