Responsive elements

A proof-of-concept. How can I do this without JS?

by cvalleskey

HTML

<div id="test">
<ul>
    <li>Box 1</li>
    <li>Box 2</li>
    <li>Box 3</li>
    <li>Box 4</li>
    <li>Box 5</li>
    <li>Box 6</li>
    <li>Box 7</li>
    <li>Box 8</li>
    <li>Box 9</li>
    <li>Box 10</li>
    <li>Box 11</li>
    <li>Box 12</li>
    <li>Box 13</li>
    <li>Box 14</li>
    <li>Box 15</li>
    <li>Box 16</li>
    <li>Box 17</li>
    <li>Box 18</li>
    <li>Box 19</li>
    <li>Box 20</li>
</ul>
<p>Resize your browser to see the effect. </p>
</div>

CSS

* {
    box-sizing: border-box;
}

body {
    font: 13px/20px Helvetica Neue, sans-serif;
    color: #333;
}

#test {
   width: 60%;
   margin: 20px auto;
}

ul {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
    overflow: hidden;
    min-width: 200px;
}

#test[data-width ^= "2"] ul li,
#test[data-width ^= "3"] ul li{ width: 100%; }
#test[data-width ^= "5"] ul li,
#test[data-width ^= "4"] ul li { width: 50%; }
#test[data-width ^= "6"] ul li,
#test[data-width ^= "7"] ul li { width: 33.3333%; }
#test[data-width ^= "8"] ul li,
#test[data-width ^= "9"] ul li { width: 25%; }
#test[data-width ^= "10"] ul li,
#test[data-width ^= "11"] ul li { width: 20%; }
#test[data-width ^= "12"] ul li,
#test[data-width ^= "13"] ul li{ width: 16.6666%; }

li {
    float: left;
    width: 12.5%;
    background: #DDD;
    color: #FFF;
    padding: 5px;
}
li:nth-child(4n), li:nth-child(4n-3) {
background: #CCC;
}

JavaScript

$("#test").attr("data-width", $("#test ul").width());

$(window).on("resize", function(e) {
        $("#test").attr("data-width", $("#test ul").width());
});