JSFiddle - React, Tailwind, and code Playground

by r043v

HTML

<!-- <article class="auto4">
    <p>1</p>
    <p>2</p>
    <p>3<br>3</p>
    <p>4</p>
    <p>5<br>5</p>
    <p>6</p>
    <p>7</p>
</article> --!>

CSS

span { color:red; }
div { color:green; clear:both; }

/* deux */

.auto2 > * { width:50%; float:left; }

.auto2 > *:nth-child(odd):last-child {
    width:100%; color:red;
}

/* trois */

.auto3 > * { width: 33.3333%; float: left; background:yellow; }

/* 1*2 */
.auto3 > *:first-child:nth-last-child(3n+2) ~ *:nth-last-child(-n+2) {
	width: 50%; color:red;
}

/* 2*2 */
.auto3 > *:first-child:nth-last-child(3n+4) ~ *:nth-last-child(-n+4) {
	width: 50%; color:blue;
}

/* quatre */

.auto4 > * { width: 25%; float: left; background:yellow; }
.auto4 > *:nth-child(4n+5) { clear:left; background:pink; }

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

.auto4 > *:first-child:nth-last-child(4n+3) ~ *:nth-last-child(-3n+3) {
	clear:left; background:red;
}

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

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

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

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

JavaScript

function autoColon(nbElem,byLine)
{   if(nbElem <= byLine)
    {    if(nbElem) return "ok 1*"+nbElem;
         return '- empty -';
    }

    var nb = nbElem; 
    var full = 0; while(nb >= byLine) { nb -= byLine; full++; }
    if(!nb) return "ok "+full+"*"+byLine;
    
    var lessSize = byLine - 1;
    var less = 1;
    var diff = lessSize - nb;
    if(diff){
        if(full >= diff)
        {    full -= diff;
             less += diff;
        } else return -1;//autoColon(nbElem,lessSize);
    }
  
    var ok = 'ok => ';
    var total = full*byLine + less*lessSize;
    if(total != nbElem) ok = "<span>FAIL ("+total+")</span>";

    if(full) return ok+" "+full+"*"+byLine+" + "+less+"*"+lessSize;
    else return ok+" "+less+"*"+lessSize;
}

function test(byline,max)
{   var o = "<div>testing line size of "+byline+"</div>";
    for(c=1;c <= max;c++)
    {    var a = autoColon(c,byline);
         if(a !== -1) continue;
         var bl = byline;
         while(a === -1) a = autoColon(c,--bl);
         o += "<br>"+c+" => "+a;
    }
    return o+"<br><br>";
}

var out = ''; for(n=4;n<17;n++) out += test(n,60);

$("body").append(out);

function generateAuto(byline)
{    var out = "";
     var cls = ".auto"+byline+" > *";
     var min = byline-1;
 
     out += cls+" { width:"+(100/byline)+"%; float:left; }<br>";
     out += cls+":nth-child("+byline+"n+"+(byline+1)+") { clear:left; }<br>";
 
     var clr = "";
 
     for(n=1;n <= min;n++)
     {     var nb = n*min;
           if(n !== 1) { out += ",<br>"; clr += ",<br>"; }
           out += cls+":first-child:nth-last-child("+nb+"),";
           out += cls+":first-child:nth-last-child("+byline+"n+"+nb+") ~ *:nth-last-child(-n+"+nb+")";
      
           clr += cls+":first-child:nth-last-child("+byline+"n+"+nb+") ~ *:nth-last-child(-"+min+"n+"+nb+")";
     }
 
     out += "{ width:"+(100/min)+"%; }";
     clr += "{ clear:left; }";
 
     out += clr;
  
     return out;
}

//var z =...