изменить порядок стиля сетки (кладка) - PullRequest
Новая
       38

изменить порядок стиля сетки (кладка)

0 голосов
/ 05 декабря 2018

У меня есть стиль сетки: 

<div class="masonry">
    <div class="item">10</div>
    <div class="item">9</div>
    <div class="item">8</div>
    <div class="item">7</div>
    <div class="item">6</div>
    <div class="item">5</div>
    <div class="item">4</div>
    <div class="item">3</div>
    <div class="item">2</div>
    <div class="item">1</div>
</div>

css: 

.masonry {
    column-count: 5;
    column-gap: 1em;
    margin-top: 20px;
}
.item {
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}

результат на этой картинке (элементы упорядочены по столбцам): Текущее изображение но я хочу упорядочить элементы по ряду. Сначала заполните первый ряд, затем второй ряд и т. д. как эта фотография мое любимое состояние

1 Ответ

0 голосов
/ 05 декабря 2018

Я сделал с flexbox, смотрите код ниже, я думаю, это то, что вы ищете 

.masonry {
    margin-top: 20px;
    display: flex;
     flex-direction: row-reverse; 
     align-items: flex-end;
     flex-wrap: wrap;
}
.item {
    margin: 0 0 1em;
    width: 20%;
}
<div class="masonry">
    <div class="item">10</div>
    <div class="item">9</div>
    <div class="item">8</div>
    <div class="item">7</div>
    <div class="item">6</div>
    <div class="item">5</div>
    <div class="item">4</div>
    <div class="item">3</div>
    <div class="item">2</div>
    <div class="item">1</div>
</div>
...