JSFiddle - React, Tailwind, and code Playground

by helgatheviking

HTML

<ul id="myList" class="grid">
  <li>
    <div>Product Image 1</div>
    <div>Product Title 1</div>
    <div>Product Quantity 1</div>
  </li>
  <li>
    <div>Product Image 2</div>
    <div>Product Title 2</div>
    <div>Product Quantity 2</div>
  </li>
  <li>
    <div>Product Image 3</div>
    <div>Product Title 3</div>
    <div>Product Quantity 3</div>
  </li>
</ul>

<button id="toggleButton">
  Change layout
</button>

SCSS

ul.table {
   display: table;
   width: 100%;
   border-collapse: collapse;

   li {
     display: table-row;

     div {
       display: table-cell;
       border: 1px solid #000;
       padding: 8px;
     }
   }


 }



 ul.grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
   /* Optional: Adds space between grid items */
   list-style-type: none;
   /* Remove default bullet points */
   padding: 0;

   li {
     background-color: #f0f0f0;
     padding: 10px;
     border: 1px solid #ccc;
   }
 }

JavaScript

document.getElementById('toggleButton').addEventListener('click', function() {
  var ul = document.getElementById('myList');
  if (ul.classList.contains('table')) {
    ul.classList.remove('table');
    ul.classList.add('grid');
  } else {
    ul.classList.remove('grid');
    ul.classList.add('table');
  }
});