JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
<li>magical</li>
<li></li>
<li></li>
    
<li>delicious</li>
<li></li>
<li></li>

<li></li>
<li></li>
<li></li>    
<ul>

CSS

/* painting */
ul { width: 420px; margin: auto; background-color: red }
li { width: 100px; height: 100px; background-color: #878787; padding: 10px; margin: 10px; float:left;}
li {font-size: 20px; font-family: Helvetica, Arial; color: white;}

/* code */
body {
    counter-reset: x y box;
}

/* First column: inc x and reset y */
li:nth-child(3n + 1) { counter-increment: x box; counter-reset: y 1; }

/* Second and third column: inc x and y */
li:nth-child(3n + 2) { counter-increment:y box; }
li:nth-child(3n)     { counter-increment:y box; }


/* pretty printer */
li:before{
    
    content: "Box #" counter(box) " (" counter(x) "," counter(y) ")";
}

JavaScript

/*
    Counters are CSS2.1
      http://www.w3.org/TR/CSS21/syndata.html#counter

    nth-child() is CSS3
      http://www.w3.org/TR/css3-selectors/
*/