Las listas en el lenguaje HTML son uno de los elementos más utilizados. Una de las utilidades más comunes que se les suele dar, es la de crear los menús de una web o mostrar listas ordenadas o desordenadas de categorías, post, etc…

Si creamos una lista, con por ejemplo este código:

<ul>
<li>PC Solución 1</li>
<li>PC Solución 2</li>
<li>PC Solución 3</li>
<li>PC Solución 4</li>
<li>PC Solución 5</li>
<li>PC Solución 6</li>
</ul>

Esto nos mostrará todos los elementos que incluya cada etiqueta <li> unos debajo de otros hasta que los muestre todos.

 

A continuación, vamos a ver el código que tendríamos que aplicar para que una lista aparezca en 2 o más columnas con un simple código CSS aplicado a la etiqueta <ul>

ul {
  column-count: 3;
}

Con este código en particular, estaríamos dividiendo la lista existente en 3 columnas aunque como es obvio, podemos variar este número para obtener el resultado que necesitemos. Un ejemplo visual de como se mostraría una lista a la que se le aplica el CSS anterior la vemos en esta misma web en la siguiente captura.