JSFiddle - React, Tailwind, and code Playground

by helgatheviking

HTML

<ul class="products columns-3">
<li class="product">1</li>
<li class="product">2</li>
<li class="product">3</li>
</ul>

CSS

ul.products {
    display: grid;
    margin: 0;
    grid-column-gap: 20px;
    grid-row-gap: 40px;
    list-style: none outside;
    
}

ul.products {
  grid-template-columns: repeat(3, 1fr);
}

li.product {
  width: auto;
}