JSFiddle - React, Tailwind, and code Playground
HTML
<h2>All even columns</h2>
<div class='FontZero'>
<div class='FZ1'><p>FZ1</p></div>
<div class='FZ2'><p>FZ2</p></div>
<div class='FZ2'><p>FZ2</p></div>
<div class='FZ3'><p>FZ3</p></div>
<div class='FZ3'><p>FZ3</p></div>
<div class='FZ3'><p>FZ3</p></div>
<div class='FZ4'><p>FZ4</p></div>
<div class='FZ4'><p>FZ4</p></div>
<div class='FZ4'><p>FZ4</p></div>
<div class='FZ4'><p>FZ4</p></div>
<div class='FZ5'><p>FZ5</p></div>
<div class='FZ5'><p>FZ5</p></div>
<div class='FZ5'><p>FZ5</p></div>
<div class='FZ5'><p>FZ5</p></div>
<div class='FZ5'><p>FZ5</p></div>
<div class='FZ6'><p>FZ6</p></div>
<div class='FZ6'><p>FZ6</p></div>
<div class='FZ6'><p>FZ6</p></div>
<div class='FZ6'><p>FZ6</p></div>
<div class='FZ6'><p>FZ6</p></div>
<div class='FZ6'><p>FZ6</p></div>
<div class='FZ7'><p>FZ7</p></div>
<div class='FZ7'><p>FZ7</p></div>
<div class='FZ7'><p>FZ7</p></div>
<div class='FZ7'><p>FZ7</p></div>
<div class='FZ7'><p>FZ7</p></div>
<div class='FZ7'><p>FZ7</p></div>
<div class='FZ7'><p>FZ7</p></div>
<div class='FZ8'><p>FZ8</p></div>
<div class='FZ8'><p>FZ8</p></div>
<div class='FZ8'><p>FZ8</p></div>
<div class='FZ8'><p>FZ8</p></div>
<div class='FZ8'><p>FZ8</p></div>
<div class='FZ8'><p>FZ8</p></div>
<div class='FZ8'><p>FZ8</p></div>
<div class='FZ8'><p>FZ8</p></div>
<div class='FZ9'><p>FZ9</p></div>
<div class='FZ9'><p>FZ9</p></div>
<div class='FZ9'><p>FZ9</p></div>
<div class='FZ9'><p>FZ9</p></div>
<div class='FZ9'><p>FZ9</p></div>
<div class='FZ9'><p>FZ9</p></div>
<div class='FZ9'><p>FZ9</p></div>
<div class='FZ9'><p>FZ9</p></div>
<div class='FZ9'><p>FZ9</p></div>
<div class='FZ10'><p>FZ10</p></div>
<div class='FZ10'><p>FZ10</p></div>
<div class='FZ10'><p>FZ10</p></div>
<div class='FZ10'><p>FZ10</p></div>
<div class='FZ10'><p>FZ10</p></div>
<div class='FZ10'><p>FZ10</p></div>
<div class='FZ10'><p>FZ10</p></div>
<div class='FZ10'><p>FZ10</p></div>
<div class='FZ10'><p>FZ10</p></div>
<div...
CSS
body {
color: #444;
padding: 0;
margin: 0;
font: 14px/21px Sans-Serif;
}
[class^=FZ] > * {margin:.25em;padding:.25em; border: dashed 1px #aaa;}
[class^=FZ] {
text-align: center;
color: #444;
background: #EEE;
}
[class^=FZ2],[class^=FZ4],[class^=FZ6],[class^=FZ8],[class^=FZ10],[class^=FZ12] {
color: #FFF;
background: #444;
}
/**
* Font-Zero Grid
* by Martijn Geerts
* browsers: IE8+
*
*/
.FontZero { font: 0/0 a; }
.FontZero > [class^=FZ] {
font: 14px/21px Sans-serif;
vertical-align: top;
display: inline-block;
}
/**
* inline-blocks (not floated) can be vertical aligned
* <div class='FZ2 align_middle'></div>
*
*/
.align_middle { vertical-align: middle; }
.align_bottom { vertical-align: bottom; }
.FZ1, .FZ1-1 { width: 100%; }
.FZ2, .FZ2-1 { width: 50%; }
.FZ3, .FZ3-1 { width: 33.33333%; }
.FZ4, .FZ4-1 { width: 25%; }
.FZ5, .FZ5-1 { width: 20%; }
.FZ6, .FZ6-1 { width: 16.66666%; }
.FZ7, .FZ7-1 { width: 14.28571%; }
.FZ8, .FZ8-1 { width: 12.5%; }
.FZ9, .FZ9-1 { width: 11.11111%; }
.FZ10, .FZ10-1 { width: 10%; }
.FZ11, .FZ11-1 { width: 9.0909%; }
.FZ12, .FZ12-1 { width: 8.33333%; }
.FZ1-1, .FZ2-2, .FZ3-3, .FZ4-4, .FZ5-5, .FZ6-6, .FZ7-7, .FZ8-8, .FZ9-9, .FZ10-10, .FZ11-11, .FZ12-12 { width: 100% }
.FZ12-1 { width: 8.33333%; }
.FZ11-1 { width: 9.0909%; }
.FZ10-1 { width: 10%; }
.FZ9-1 { width: 11.11111%; }
.FZ8-1 { width: 12.5%; }
.FZ7-1 { width: 14.28571%; }
.FZ6-1, .FZ12-2 { width: 16.66666%; }
.FZ11-2 { width: 18.18181%; }
.FZ5-1, .FZ10-2 { width: 20%; }
.FZ9-2 { width: 22.22222%; }
.FZ4-1, .FZ8-2, .FZ12-3 { width: 25%; }
.FZ11-3 { width: 27.27272%; }
.FZ7-2 { width: 28.57142%; }
.FZ10-3 { width: 30%; }
.FZ3-1, .FZ6-2, .FZ9-3, .FZ12-4 { width: 33.33333%; }
.FZ11-4 { width: 36.36363%; }
.FZ8-3 { width: 37.5%; }
.FZ5-2, .FZ10-4 { width: 40%; }
.FZ12-5 { width: 41.66666%; }
.FZ7-3 { width: 42.85714%; }
.FZ9-4 { width: 44.44444%; }
.FZ11-5 { width: 45.45454%; }
.FZ2-1, .FZ4-2, .FZ6-3, .FZ8-4, .FZ10-5,...