JSFiddle - React, Tailwind, and code Playground

by Mathias Bynens

HTML

<div class="example">
    <ul>
        <li>block</li>
        <li>block</li>
        <li>block</li>
        <li>block</li>
        <li>block</li>
        <li>block</li>
        <li>block</li>
        <li>block</li>
        <li>block</li>
    </ul>
</div>

CSS

.example {background:#fff; overflow:hidden; padding:1em; -moz-border-radius:14px; -webkit-border-radius:14px; border-radius:14px;}

.example ul {overflow:hidden; padding:.5em; margin:0; width:13em; background:#dd0; -moz-border-radius:12px; -webkit-border-radius:12px; border-radius:12px;}
.example li {float:left; background:#0dd; list-style:none; padding:0; margin:0; width:4em; height:2em; line-height:2em; margin:0em 0.5em 0.5em 0em; text-align:center;}
.example li:nth-child(3n) {margin-right:0;}
.example li:first-child {-moz-border-radius-topleft:10px; -webkit-border-top-left-radius:10px; border-top-left-radius:10px;} /* okay to use :first-child here because the first block will always be in the top left corner */
.example li.bottom-right-corner {-moz-border-radius-bottomright:10px; -webkit-border-bottom-right-radius:10px; border-bottom-right-radius:10px;} /* can't use :last-child here, because we can't be sure the last block is in the bottom right corner */
.example ul li.top-right-corner {-moz-border-radius-topright:10px; -webkit-border-top-right-radius:10px; border-top-right-radius:10px;}
.example ul li.bottom-left-corner {-moz-border-radius-bottomleft:10px; -webkit-border-bottom-left-radius:10px; border-bottom-left-radius:10px;}
.example ul li:nth-last-child(-n+3) { margin-bottom:0;} /* last row */

JavaScript

$(function() {
     var $li = $('.example li'),
         liLength = $li.length;
        console.log(liLength);
    if (0 === liLength % 3) {
        console.log(liLength);
    }
});