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

La méthode "mobile-first" consiste à utiliser Colonnes CSS créer une expérience pour les petits écrans puis utiliser Requêtes sur les médias pour augmenter le nombre de colonnes à chacun des points de rupture définis dans votre mise en page.

ul {
  column-count: 2;
  column-gap: 2rem;
}
@media screen and (min-width: 768px)) {
  ul {
    column-count: 3;
    column-gap: 5rem;
  }
}

<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>

Answer 2

J'ai constaté que (actuellement) Chrome ( Version 52.0.2743.116 m ) a des tonnes de bizarreries et de problèmes avec css column-count concernant les éléments qui débordent et les éléments positionnés de manière absolue à l'intérieur des éléments, en particulier avec certaines transitions dimensionnelles

c'est un désordre total qui ne peut être corrigé, j'ai donc essayé de m'attaquer à ce problème par un simple javascript, et j'ai créé une bibliothèque qui fait cela - https://github.com/yairEO/listBreaker

Page de démonstration

Answer 3

Si vous pouvez le supporter, la grille CSS est probablement le moyen le plus propre de transformer une liste unidimensionnelle en une présentation à deux colonnes avec des intérieurs réactifs.

ul {
  max-width: 400px;
  display: grid;
  grid-template-columns: 50% 50%;
  padding-left: 0;
  border: 1px solid blue;
}

li {
  list-style: inside;
  border: 1px dashed red;
  padding: 10px;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
<ul>

Voici les deux lignes clés qui vous permettront d'obtenir une présentation en deux colonnes

display: grid;
grid-template-columns: 50% 50%;

Answer 4

li{
width:50%
}

ul{
display:flex;
flex-wrap:wrap
}

<ul>
<li>List Item1</li>
<li>List Item2</li>
<li>List Item3</li>
<li>List Item4</li>
<li>List Item5</li>
<li>List Item6</li>
<li>List Item7</li>
<li>List Item8</li>
<li>List Item9</li>
<li>List Item10</li>
</ul>

Il s'agit de l'une des méthodes les plus simples qui vous permet de spécifier le nombre de colonnes nécessaires en modifiant la largeur de li. Et en faisant en sorte que l'affichage ul soit flexible et qu'il ne fasse qu'envelopper les éléments.

Answer 5

Voici ce que j'ai fait

ul {
      display: block;
      width: 100%;
}

ul li{
    display: block;
    min-width: calc(30% - 10px);
    float: left;
}

ul li:nth-child(2n + 1){
    clear: left;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>0</li>
</ul>