1

tengo el siquiente codigo

.grid{
    column-count: 2;
    column-gap: 1em;
}

.grid-item{
    margin: 10px;
    background-color: #333;
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}

.grid-item:nth-child(odd){
    height: 320px;
}

.grid-item:nth-child(even){
    height: 500px;
}

.grid-item .numero{
    margin: 10px;
    padding: 10px;
    color: #333;
    background-color: #fff;
    border-radius: 50%;
    width: 10%;
    height: auto;
    font-weight: bold;
    text-align: center;
    font-size: 18px;
}

@media (max-width: 768px){
    .grid{
        column-count: 1;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script src="https://masonry.desandro.com/v2/jquery.masonry.min.js"></script>
<div class="grid">
        <div class="grid-item"><div class="numero">1</div></div>
        <div class="grid-item"><div class="numero">2</div></div>
        <div class="grid-item"><div class="numero">3</div></div>
        <div class="grid-item"><div class="numero">4</div></div>
        <div class="grid-item"><div class="numero">5</div></div>
        <div class="grid-item"><div class="numero">6</div></div>
        <div class="grid-item"><div class="numero">7</div></div>
        <div class="grid-item"><div class="numero">8</div></div>
        <div class="grid-item"><div class="numero">9</div></div>
        <div class="grid-item"><div class="numero">10</div></div>
</div>

y utilizo el plugin de Masonry q los dejo aqui tambien

https://masonry.desandro.com/v2/jquery.masonry.min.js

esto me da el siguiente resultado:

introducir la descripción de la imagen aquí

como ven los item se van colando abajo en la primera columna y continua con la siguiente luego

como si tuviera una matriz asi:

1 - 4 - 7 - 9
2 - 5 - 8 - 10
3 - 6

y yo la quiero q los item se ubique de manera horizontal y bajen, o sea asi

1 - 2 - 3 - 4
5 - 6 - 7 - 8
9 - 10

que solucion me dan, por favor ayuda

1 respuesta 1

1

Si vas a la documentación de Masonry, verás que hay una opción que es horizontalOrder que hace exactamente lo que quieres: coloca los elementos para que (más o menos) mantengan el orden horizontal de izquierda a derecha. (Aquí puedes ver una demo en Codepen)

Masonry con orden horizontal

Así, en tu caso en particular deberías hacer algo como esto:

$('.grid').masonry({
  // tus opciones, por ejemplo, itemSelector: '.grid-item',
  horizontalOrder: true
});
3
  • Gracias por tu respuesta, he leido y aplicado dicha opcion a mi codigo, pero me daña totalmente el diseño, los .grid-item se pone al 100% del .grid, como si no leyera el column-count: 2; intente solucionarlo poniendo width:50% pero al momento del cambiar de tamaño la ventana hace cosas no deseadas, ¿alguna sugerencia? Commented el 3 jul. 2017 a las 4:52
  • ¿Puedes compartir el código JS con el que llamas a masonry?
    – Alvaro Montoro
    Commented el 3 jul. 2017 a las 4:54
  • He editado la publicacion para q le se mas facil de ayudarme y cuanto al codigo js: $('.grid').masonry({ percentPosition: true, horizontalOrder: true, itemSelector: '.grid-item', }); Commented el 3 jul. 2017 a las 5:38

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.