Cómo dividir la lista en un solo ul en 3 columnas

Si encuentras algún detalle que te causa duda puedes dejarlo en la sección de comentarios y haremos todo lo necesario de ayudarte lo más rápido posible.

Solución:

ul 
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;

CSS3 flexbox también puede hacer esto también:

ul 
  flex-direction: column;
  flex-wrap: wrap;
  display: flex;
  height: 100vh;

ul li 
  flex: 1 0 25%;

Arriba css creará el siguiente diseño:

+--------------------+
|  01  |  05  |  09  |
+--------------------+
+--------------------+
|  02  |  06  |  10  |
+--------------------+
+--------------------+
|  03  |  07  |  11  |
+--------------------+
+--------------------+
|  04  |  08  |  12  |
+--------------------+

* box-sizing: border-box;

body 
  margin: 0;


.list 
  flex-direction: column;
  list-style: none;
  flex-wrap: wrap;
  height: 100vh;
  display: flex;
  padding: 0;
  margin: 0;


.list li 
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  flex: 1 0 25%;
  padding: 10px;
  color: #fff;


.col1 
  background: blue;


.col2 
  background: orange;


.col3 
  background: green;

  
Test 1
  
Test 2
  
Test 3
  
Test 4

  
Test 5
  
Test 6
  
Test 7
  
Test 8

  
Test 9
  
Test 10
  
Test 11
  
Test 12

En caso de que desee el siguiente diseño:

+-----------------------+
|  1  |  2  |  3  |  4  |
+-----------------------+
+-----------------------+
|  5  |  6  |  7  |  8  | 
+-----------------------+
+-----------------------+
|  9  |  10 |  11 | 12  |
+-----------------------+

puedes usar el siguiente css:

ul 
  flex-wrap: wrap;
  display: flex;

ul li 
  flex: 1 0 25%;

* box-sizing: border-box;

body 
  margin: 0;


.list 
  list-style: none;
  flex-wrap: wrap;
  display: flex;
  padding: 0;
  margin: 0;


.list li 
  border-bottom: 1px solid #fff;
  flex: 1 0 25%;
  padding: 10px;
  color: #fff;


.list li:nth-child(4n + 1) 
  background: blue;


.list li:nth-child(4n + 2) 
  background: orange;


.list li:nth-child(4n + 3) 
  background: green;

.list li:nth-child(4n + 4) 
  background: purple;

  
Test 1
  
Test 2
  
Test 3
  
Test 4

  
Test 5
  
Test 6
  
Test 7
  
Test 8

  
Test 9
  
Test 10
  
Test 11
  
Test 12

si no le gusta la respuesta de recuento de columnas (a mí también me gusta, pero es true ese soporte es “dudoso”, especialmente en IE), simplemente puede hacer esto:

ul liwidth:33.333333%; float:left;

o incluso

uldisplay:block;
ul lidisplay:inline-block;

Pero de esta manera tendrás 3 columnas aunque en diferente orden: en lugar de

1   4   7
2   5   8
3   6   9

tendras

1   2   3
4   5   6
7   8   9

así que considere los pros y los contras.

Personalmente, usaría la respuesta de monkeyinsight, pero si necesita otra opción, aquí tiene

Aquí puedes ver las comentarios y valoraciones de los usuarios

Eres capaz de añadir valor a nuestra información dando tu experiencia en las interpretaciones.

---

---

Utiliza Nuestro Buscador