1

Tengo una lista de items (7) que se organizan uno debajo de otro en la pantalla. Necesito que a partir del 8 en adelante los items se me reorganicen en 2 columnas y no en 1. Pero no sé muy bien cómo hacerlo o si existen condicionales en CSS con los que pueda decir que a partir del 8 se vaya distribuyendo en 2 columnas con otros tamaños. Es decir cuando entre el item 8 tener 2 columnas de 4 items cada una. Si entra el item 9 pues 2 columnas con 4 items cada una y el sobrante en 1 columna y así sucesivamente. ¿Cómo podría hacer esto? Pensé en Grid pero no sé cómo especificar que ese diseño sea a partir de que haya 8 items en adelante.

Html:

<div>
  

  <ul class="list">

    <li>
      <button class="btn" >item1</button>
    </li>
    <li>
     <button class="btn" >item2</button>
    </li>
    <li>
     <button class="btn" >item3</button>
    </li>
    <li>
     <button class="btn" >item4</button>
    </li>
    <li>
     <button class="btn" >item5</button>
    </li>
    <li>
      <button class="btn" >item6</button>
    </li>
    <li>
      <button class="btn" >item7</button>
    </li>
    

Css:

.list {
    flex-wrap: wrap;
    justify-content: center;
    justify-content: space-evenly;
    flex-direction: row;

    display: flex;
    margin: 40px 0;
    width: 100%;
    max-width: 1100px;

    text-align: center;

    > li {
        flex: 0 0 100%;

        max-width: 600px;
    }
4
  • Puedes crear los elementos dinámicamente con jQuery, así tendrás un control de los elementos asignando id o clases a ellos, o incluso con jQuery o Javascript podrás recorrer los elementos y a partir de la 8 posición hacer los cambios necesarios, otra cosa que no queda claro, es necesario que sea una lista?. Commented el 27 abr. 2022 a las 11:48
  • Hola Óscar. Sí tiene que ser una lista. La solución que me comentas no sé muy bien cómo se haría.
    – Basileia
    Commented el 27 abr. 2022 a las 11:54
  • Vale, en el css creo que el > se te ha colado no? creo que debería ser un }? Commented el 27 abr. 2022 a las 12:01
  • Ya que decís que no lográs explicarte, podrías mostrar dibujos de lo que esperás que se muestre, aunque no todos pueden ver las imágenes aquí. Procura de todas maneras explicarte mejor.
    – padaleiana
    Commented el 27 abr. 2022 a las 15:07

2 respuestas 2

1

Podrías lograrlo utilizando :nth-child para los hijos n+8

Ejemplo:

.services__list {
  flex-wrap: wrap;
  justify-content: space-evenly;
  flex-direction: row;
  display: flex;
  margin: 40px auto;
  width: 100%;
  max-width: 600px;
  text-align: center;
  padding: 0;
}

.services__list>li {
  flex: 1 0 100%;
  background-color: green; /*Solo para visualizar*/
  list-style-type: none;
}

.services__list>li:nth-child(n+8) {
  flex: 1 0 50%;
  max-width: 50%; /* Opcional */
  background-color: red; /*Solo para visualizar*/
}
<div class="content no_highlights">
  <p class="title">Título</p>
  <ul class="services__list">
    <li>
      <button class="btn">item1</button>
    </li>
    <li>
      <button class="btn">item2</button>
    </li>
    <li>
      <button class="btn">item3</button>
    </li>
    <li>
      <button class="btn">item4</button>
    </li>
    <li>
      <button class="btn">item5</button>
    </li>
    <li>
      <button class="btn">item6</button>
    </li>
    <li>
      <button class="btn">item7</button>
    </li>
    <li>
      <button class="btn">item8</button>
    </li>
    <li>
      <button class="btn">item9</button>
    </li>
    <li>
      <button class="btn">item10</button>
    </li>
  </ul>
</div>


Actualización:

En base a la nueva información, lo que podes hacer es aplicar diferentes estilos dependiendo de la cantidad de "hermanos"

Ejemplo:

.services__list {
  flex-wrap: wrap;
  justify-content: space-evenly;
  flex-direction: row;
  display: flex;
  margin: 40px auto;
  width: 100%;
  max-width: 600px;
  text-align: center;
  padding: 0;
}

.services__list>li {
  flex: 1 0 100%;
  background-color: green; /*Solo para visualizar*/
  list-style-type: none;
}

.services__list>li:first-child:nth-last-child(n+8),
.services__list>li:first-child:nth-last-child(n+8) ~ li {
  flex: 1 0 50%;
  background-color: red; /*Solo para visualizar*/
}
<div class="content no_highlights">
  <p class="title">Título</p>
  <ul class="services__list">
    <li>
      <button class="btn">item1</button>
    </li>
    <li>
      <button class="btn">item2</button>
    </li>
    <li>
      <button class="btn">item3</button>
    </li>
    <li>
      <button class="btn">item4</button>
    </li>
    <li>
      <button class="btn">item5</button>
    </li>
    <li>
      <button class="btn">item6</button>
    </li>
    <li>
      <button class="btn">item7</button>
    </li>
  </ul>
  <ul class="services__list">
    <li>
      <button class="btn">item1</button>
    </li>
    <li>
      <button class="btn">item2</button>
    </li>
    <li>
      <button class="btn">item3</button>
    </li>
    <li>
      <button class="btn">item4</button>
    </li>
    <li>
      <button class="btn">item5</button>
    </li>
    <li>
      <button class="btn">item6</button>
    </li>
    <li>
      <button class="btn">item7</button>
    </li>
    <li>
      <button class="btn">item8</button>
    </li>
    <li>
      <button class="btn">item9</button>
    </li>
  </ul>
</div>

5
  • Gracias Marcos, pero veo que no me he explicado correctamente. Ahora tengo 7 items que van uno debajo de otro en 1 columna. Pero a partir del 8 necesito que se vayan distribuyendo de este modo: 8 items (en 2 columnas) 9 items (2 columnas de 4 items cada una y el item que falta en 1 columna) y así sucesivamente hasta unos 14.
    – Basileia
    Commented el 27 abr. 2022 a las 13:13
  • @Paz actualice mi respuesta, espero que ahora si haya interpretado correctamente lo que necesitas
    – Marcos
    Commented el 27 abr. 2022 a las 14:00
  • Gracias Marcos pero creo que no logro explicarme. Ahora tengo 7 items colocados uno debajo de otro. A partir del 7, es decir ya con el 8 item tiene que pasar este bloque a ser 2 columnas. Cuando haya 9 items en total 2 columnas y el sobrante debajo en 1, si son 10 pues 5 en cada columna.
    – Basileia
    Commented el 27 abr. 2022 a las 14:15
  • @Basileia Vos sabes que leo y re-leo tus comentarios y según entiendo mi actualizacion hace lo que indicas. ul con 7 li, ul con 8 li y ul con 9 li
    – Marcos
    Commented el 27 abr. 2022 a las 15:26
  • Hola! Sí me sirvió! Gracias!
    – Basileia
    Commented el 27 abr. 2022 a las 21:18
1

Lo más fácil es crear los elementos dinámicamente ejemplo:

Te dejo el HTML:

<div class="content no_highlights">
    <p class="title">Título</p>
    <ul class="services__list">
    </ul>
</div>

Luego con jQuery he creado los elementos asignando un id a cada elemento li.

function putDivs() {
     for (let i = 0; i < 15; i++) {
         $('.services__list').append('<li id="elem-'+i+'"> <button class="btn">item '+i+'</button> </li>');
     }
}

Luego recorremos los elementos li de la lista, y declaramos la variable con el número de donde queremos empezar a poner dos columnas, en tu caso el 8, le sumas uno, por que el indice empieza por 0, y en la función dentro del for compruebas si el número es impar le aplicas el estilo que desees al elemento en concreto.

Nota: empecé con el elemento 9, por que has dicho a partir del 9.

function positions() {
            var total = 0;
            $('.services__list li').each(function(indice, elemento) {
                total++;
            });

            var elem = (8 + 1); // le sumamos uno por que la posición del for empieza en 0
            for(let i = elem; i <= total; i++) {
                if(i%2==1){
                    console.log(i);
                    $('#elem-'+i).css('display', 'contents');
                }
            }
            
        }

Ejemplo del resultado: introducir la descripción de la imagen aquí


Código completo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        .services__list {
            flex-wrap: wrap;
            justify-content: center;
            justify-content: space-evenly;
            flex-direction: row;
            display: flex;
            margin: 40px 0;
            width: 100%;
            max-width: 1100px;
            text-align: center;

        }
        li {
            flex: 0 0 100%;

            max-width: 600px;
        }
    </style>
</head>
<body>
    <div class="content no_highlights">
  
        <p class="title">Título</p>
        <ul class="services__list">
        </ul>
    </div>

    <script>
        $(document).ready(function() {
            putDivs();
            positions();
        });

        function putDivs() {
            for (let i = 0; i < 15; i++) {
                $('.services__list').append('<li id="elem-'+i+'"> <button class="btn">item '+i+'</button> </li>');
            }
        }

        function positions() {
            var total = 0;
            $('.services__list li').each(function(indice, elemento) {
                total++;
            });

            var elem = (8 + 1); // le sumamos uno por que la posición del for empieza en 0
            for(let i = elem; i <= total; i++) {
                if(i%2==1){
                    console.log(i);
                    $('#elem-'+i).css('display', 'contents');
                }
            }
            
        }
    </script>
</body>
</html>
2
  • @Paz no debes modificar la respuesta para agregar o eliminar código. Debe ser el autor quien haga los cambios.
    – padaleiana
    Commented el 27 abr. 2022 a las 15:05
  • @Basileia concuerdo con elcompañero, si te sirvió podrías ponerla como aprobada, si no, no entiendo por que intentas modificar mi respuesta. Commented el 27 abr. 2022 a las 15:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.