JSFiddle - React, Tailwind, and code Playground

by danield770

HTML

<div class="grid">
  <div class="head">Column 1 (3 items)</div>
  <div class="data">item 1-1</div>
  <div class="data">item 1-2</div>
  <div class="data">item 1-3</div>
  <div class="head">Column 2 (4 items)</div>
  <div class="data">item 2-1</div>
  <div class="data">item 2-2</div>
  <div class="data">item 2-3</div>
  <div class="data">item 2-4</div>
  <div class="head">Column 3 (2 items)</div>
  <div class="data">item 3-1</div>
  <div class="data">item 3-2</div>
  <div class="head">Column 4 (1 items)</div>
  <div class="data">item 4-1</div>
</div>

CSS

* { margin:0;padding:0 }

.grid {
    -webkit-column-count:4;
    -moz-column-count:4;
    column-count:4;
    width: 80%;
    margin: 0 auto;
}
.grid .head {
  background: orange;
  border-bottom: thin dotted;
  break-before: column; /* this is the vital rule */
}
.grid .data {
  background: yellow;
  border-bottom: thin dotted;
}
@media screen and (min-width:0\0) { 
    .grid {
        position: relative;
        left:-20vw;
        /* Probably because IE wants to add a column before the first head class?? 
        Interestingly enough though, the following selector does not work:
        .data + .head { break-before: column; } */
   }
}