How do I use Masonry horizontally?

Question

How do I use Masonry horizontally?

Navigation

#1 by (1 votes)

1

I have the following code

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

and I use the Masonry plugin that I leave here too

link

this gives me the following result:

As you see the items are going down in the first column and continue with the next one afterwards

as if it had a matrix like this:

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

and I want the items to be placed horizontally and lower, so that's it

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

What solution do you give me, please help

javascript jquery css plugin

asked by Samir Llorente 03.07.2017 в 02:01

source

1 answer

Python failed concatenation error Check if there is a value in the database

score 1 · Accepted Answer

If you go to the Masonry documentation , you will see that there is an option that is horizontalOrder that does exactly what you want: place the elements so that (more or less) they keep the horizontal order from left to right. (Here you can see a demo on Codepen )

So, in your particular case, you should do something like this:

$('.grid').masonry({
  // tus opciones, por ejemplo, itemSelector: '.grid-item',
  horizontalOrder: true
});