JSFiddle - React, Tailwind, and code Playground

by thirtydot

HTML

<section class="row">
<div>
<article>
<p>
The idea of this fluid grid is that we don't need to know in advance how many columns we want. So this grid uses some rarely used css2.1 to calculate how many cols a row has and than distributes the cols in the row.
</p>
<p>
If we have only one row we need to confirm this by:<br/>
<code>.row>:nth-last-child(1):nth-child(1)</code>
</p>
</article>
</div>
</section>

<section class="row">
<div>
<article>
<p>If we put a second column in a row the first col needs to be the same as the second to last col and give it a width of 50%:<br/>
<code>.row>:nth-last-child(2):nth-child(1)</code>
</p>
</article>
</div>
<div>
<article>
<p>For the second column in a row it is the other way around:<br/>
<code>.row>:nth-last-child(1):nth-child(2)</code>
</p>
</article>
</div>
</section>

<section class="row">
<div>
<article>
<p>with 3 columns in a row we follow the same route as above.<br />
<code>.row>:nth-last-child(3):nth-child(1) {width:33.33%;} </code>
</p>
</article>
</div>
<div>
<article>
<p>So this is col 2 of 3</p>
</article>
</div>
<div>
<article>
<p>And this is col 3 of 3.<br/>
It is important to note that this last col is 33.4% wide to align it with other rows.
</p>
</article>
</div>
</section>

<section class="row">
<span>
<article>
<p>You don't need to use a div (although prefered). You can also use any other element as long as it is not empty. Empty elements will be merged with the next element.</p>
</article>
</span>
<form>
<article>
<p>Forms can be used too.</p>
</article>
</form>
<div>
<article>
<h3>Col 3 of 4 with some long text to see how it fills</h3>
<p>
Donec suscipit, nisl vitae pulvinar aliquam, dolor risus placerat nisi, nec lobortis nibh eros et mauris. Vivamus ut nibh id metus pellentesque pretium. Phasellus semper nisi id mauris laoreet rutrum. Nulla urna libero, fermentum id consectetur ac, sollicitudin a sapien. Duis placerat, diam nec egestas interdum, metus metus lobortis mi, vitae placerat ipsum augue ut...

CSS

.row {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.row > * {
    display: table-cell;
}
.row > :empty {
    display: none;
}
/* for example: */
.row > :empty + :not(:empty) + :last-child:not(:empty) {
    width: 33.33%;
}


html {
    font-size: 11px;
}
article {
    margin: .5em;
    border: 1px solid green;
    border-radius: .3em;
    padding: .5em;
}