CODEWITHSUNDEEP
javascriptjquerycssplugins
Samir Llorente
Samir Llorente

Reputation: 266

How do I use Masonry horizontally?

I have the following HTML code

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

With the following css

.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;
    }
}

And I use the Masonry plugin that I leave here too

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

This gives me the following result:

Imagen

As you see the items are going to drop down in the first column and continue with the next

as if it had an array like this:

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

And I want the items to be placed horizontally and down, so

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

What solution do you give me, please help. Sorry for the English...

Upvotes: 4

Views: 5021

Answers (1)

jswebb
jswebb

Reputation: 537

From the Masonry options documentation:

horizontalOrder

Lays out items to (mostly) maintain horizontal left-to-right order.

horizontalOrder: true

And here is a CodePen demonstrating the option. Change horizontalOrder: true to horizontalOrder: false to see how the blocks are altered to switch order.

Upvotes: 2

Related Questions