JSFiddle - React, Tailwind, and code Playground

by omarjuvera

HTML

<ul>
  <!-- Column 1 -->
  <li class="col1-item1">col1 item 1</li>
  <li class="col1-item2">col1 item 2</li>
  <li class="col1-item3">col1 item 3</li>
  <li class="col1-item4">col1 item 4</li>

  <!-- Column 2 -->
  <li class="col2-item1">col2 item 1</li>
  <li class="col2-item2">col2 item 2</li>
  <li class="col2-item3">col2 item 3</li>

  <!-- Column 3 -->
  <li class="col3-item1">col3 item 1</li>
  <li class="col3-item2">col3 item 2</li>
  <li class="col3-item3">col3 item 3</li>
  <li class="col3-item4">col3 item 4</li>
</ul>

CSS

ul {
  display: grid; 
  grid-auto-columns: 1fr; 
  grid-auto-rows: 1fr; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 1fr 1fr 1fr 1fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    "col1-item1 col2-item1 col3-item1"
    "col1-item2 col2-item2 col3-item2"
    "col1-item3 col2-item3 col3-item3"
    "col1-item4 col2-item3 col3-item4"; 
}

/* Assign a class to each li */
.col1-item1 { grid-area: col1-item1; }
.col1-item2 { grid-area: col1-item2; }
.col1-item3 { grid-area: col1-item3; }
.col1-item4 { grid-area: col1-item4; }
.col2-item1 { grid-area: col2-item1; }
.col2-item2 { grid-area: col2-item2; }
.col2-item3 { grid-area: col2-item3; }
.col3-item1 { grid-area: col3-item1; }
.col3-item2 { grid-area: col3-item2; }
.col3-item3 { grid-area: col3-item3; }
.col3-item4 { grid-area: col3-item4; }