JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<ul class="menu">
  <li class="menu-item">
    <a href="#">Catégorie 1</a>
    <ul>
      <li><a href="#">Lien 1</a></li>
      <li><a href="#">Lien 2</a></li>
      <li><a href="#">Lien 3</a></li>
      <li><a href="#">Lien 4</a></li>
      <li><a href="#">Lien 5</a></li>
      <li><a href="#">Lien 6</a></li>
    </ul>
  </li>
  <li class="menu-item">
    <a href="#">Catégorie 2</a>
    <ul>
      <li><a href="#">Lien 1</a></li>
      <li><a href="#">Lien 2</a></li>
      <li><a href="#">Lien 3</a></li>
      <li><a href="#">Lien 4</a></li>
    </ul>
  </li>
  <li class="menu-item">
    <a href="#">Catégorie 3</a>
  </li>
  <li class="menu-item">
    <a href="#">Catégorie 4</a>
  </li>
  <li class="menu-item">
    <a href="#">Catégorie 5</a>
  </li>
</ul>

SCSS

.menu {
  columns: 4;
  column-gap: 15px;
}

// 1. Prevent content from a same parent to spread into multiple columns
// 1.1. for Chrome and Edge
// 1.2. for Firefox
.menu-item {
  break-inside: avoid-column; // [1.1]
  display: inline-block; // [1.2]
  width: 100%; // [1.2]
  page-break-inside: avoid; // [1.2]

  @supports (break-inside: avoid-column) { // [1.1]
    display: block;
  }

  // For styling purpose 
  padding-bottom: 15px;
  
  a + ul {
    margin-top: 5px;
  }
}