Existe-t-il un moyen de diviser une liste en colonnes ?

Question

Ma page web contient une liste "maigre" : par exemple, une liste de 100 éléments d'un mot chacun. Pour réduire le défilement, je souhaite présenter cette liste en deux, voire quatre colonnes sur la page. Comment dois-je m'y prendre avec CSS ?

<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

Je préfère que la solution soit flexible, de sorte que si la liste passe à 200 éléments, je ne doive pas procéder à de nombreux ajustements manuels pour l'adapter à la nouvelle liste.

Answer 1

J'ai une liste non ordonnée dans mon site WordPress. Pour ceux qui ont eu le même problème (la rendre réactive), le CSS est le suivant. Bonne lecture !

/*BASED ON THE ACCEPTED ANSWER*/
.elementor-icon-list-items {
  -moz-column-count: 4;
  -moz-column-gap: 20px;
  -webkit-column-count: 4;
  -webkit-column-gap: 20px;
  column-count: 4;
  column-gap: 20px;
}

/*RESPONSIVE CODE FROM HERE*/

@media (max-width: 769px) {
  .elementor-icon-list-items {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}

@media (max-width: 577px) {
  .elementor-icon-list-items {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}

@media (max-width: 416px) {
  .elementor-icon-list-items {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
  }
}

<ul class="elementor-icon-list-items">
  <li class="elementor-icon-list-item">
    <span class="elementor-icon-list-icon">
                            <i aria-hidden="true" class="fas fa-check-circle"></i>                      </span>
    <span class="elementor-icon-list-text">List item 1</span>
  </li>
  <li class="elementor-icon-list-item">
    <span class="elementor-icon-list-icon">
                            <i aria-hidden="true" class="fas fa-check-circle"></i>                      </span>
    <span class="elementor-icon-list-text">List item 2</span>
  </li>
  <li class="elementor-icon-list-item">
    <span class="elementor-icon-list-icon">
                            <i aria-hidden="true" class="fas fa-check-circle"></i>                      </span>
    <span class="elementor-icon-list-text">List item 2</span>
  </li>
  <li class="elementor-icon-list-item">
    <span class="elementor-icon-list-icon">
                            <i aria-hidden="true" class="fas fa-check-circle"></i>                      </span>
    <span class="elementor-icon-list-text">List item 3</span>
  </li>
  <li class="elementor-icon-list-item">
    <span class="elementor-icon-list-icon">
                            <i aria-hidden="true" class="fas fa-check-circle"></i>                      </span>
    <span class="elementor-icon-list-text">List item 4</span>
  </li>
  <li class="elementor-icon-list-item">
    <span class="elementor-icon-list-icon">
                            <i aria-hidden="true" class="fas fa-check-circle"></i>                      </span>
    <span class="elementor-icon-list-text">List item 5</span>
  </li>
  <li class="elementor-icon-list-item">
    <span class="elementor-icon-list-icon">
                            <i aria-hidden="true" class="fas fa-check-circle"></i>                      </span>
    <span class="elementor-icon-list-text">List item 6</span>
  </li>
  <li class="elementor-icon-list-item">
    <span class="elementor-icon-list-icon">
                            <i aria-hidden="true" class="fas fa-check-circle"></i>                      </span>
    <span class="elementor-icon-list-text">List item 7</span>
  </li>
  <li class="elementor-icon-list-item">
    <span class="elementor-icon-list-icon">
                            <i aria-hidden="true" class="fas fa-check-circle"></i>                      </span>
    <span class="elementor-icon-list-text">List item 8</span>
  </li>
  <li class="elementor-icon-list-item">
    <span class="elementor-icon-list-icon">
                            <i aria-hidden="true" class="fas fa-check-circle"></i>                      </span>
    <span class="elementor-icon-list-text">List item 9</span>
  </li>
  <li class="elementor-icon-list-item">
    <span class="elementor-icon-list-icon">
                            <i aria-hidden="true" class="fas fa-check-circle"></i>                      </span>
    <span class="elementor-icon-list-text">List item 10</span>
  </li>
  <li class="elementor-icon-list-item">
    <span class="elementor-icon-list-icon">
                            <i aria-hidden="true" class="fas fa-check-circle"></i>                      </span>
    <span class="elementor-icon-list-text">List item 11</span>
  </li>
  <li class="elementor-icon-list-item">
    <span class="elementor-icon-list-icon">
                            <i aria-hidden="true" class="fas fa-check-circle"></i>                      </span>
    <span class="elementor-icon-list-text">List item 12</span>
  </li>
  <li class="elementor-icon-list-item">
    <span class="elementor-icon-list-icon">
                            <i aria-hidden="true" class="fas fa-check-circle"></i>                      </span>
    <span class="elementor-icon-list-text">List item 13</span>
  </li>
</ul>