JSFiddle - React, Tailwind, and code Playground

by r043v

CSS

.auto4 { margin-bottom:20px; width:100%; float:left; background:#cccccc; }
.auto4 > *:nth-child(odd) { background:pink; }
.auto4 > *:nth-child(even) { background:yellow; }

.auto4 > * { width:25%; float:left; }

.auto4 > *:first-child:nth-last-child(3), .auto4 > *:first-child:nth-last-child(4n+3) ~ *:nth-last-child(-n+3),
.auto4 > *:first-child:nth-last-child(6), .auto4 > *:first-child:nth-last-child(4n+6) ~ *:nth-last-child(-n+6),
.auto4 > *:first-child:nth-last-child(9), .auto4 > *:first-child:nth-last-child(4n+9) ~ *:nth-last-child(-n+9)
{ width:33.33333%; clear:none; }

/*
1 => 1*1
2 => 1*2
3 => 1*3
5 => 1*3 + 1*2
*/

.auto4 > *:nth-child(4n+5),
.auto4 > *:first-child:nth-last-child(4n+3) ~ *:nth-last-child(-3n+3),
.auto4 > *:first-child:nth-last-child(4n+6) ~ *:nth-last-child(-3n+6),
.auto4 > *:first-child:nth-last-child(4n+9) ~ *:nth-last-child(-3n+9)
{ clear:left; }

JavaScript

$body = $("body");

for(a=6;a<=60;a++)
{    var $a = $("<article/>").addClass("auto4");
     for(n=1;n<=a;n++)
     {   if(Math.round(Math.random()*4) === 1)
              $a.append("<p>"+n+"<br>"+n+"</p>");
         else $a.append("<p>"+n+"</p>");
     }
     $body.append($a);
}