Порядок элементов со значением столбца-столбца

Question

Я пытаюсь создать макетный макет с моими изображениями, используя только CSS. Я следовал this guide, и он работает хорошо.

HTML:

<div class="grid"> 
    <img src="1.jpg"> 
    <img src="2.jpg"> 
    <img src="3.jpg"> 
    <img src="4.jpg"> 
    <img src="5.jpg"> 
    <img src="6.jpg"> 
    <img src="7.jpg"> 
    <img src="8.jpg"> 
</div> 

CSS:

.grid { 
    line-height: 0 ; 

    -webkit-column-count: 4 ; 
    -webkit-column-gap: 10px ; 
    -moz-column-count: 4 ; 
    -moz-column-gap:  10px ; 
    column-count:   4 ; 
    column-gap:   10px ; 

    margin: 20px; 
} 

.grid img { 
    width: 100% ; 
    height: auto ; 
    margin-bottom: 10px; 
} 

Это выглядит следующим образом:

Однако изображения появляется в следующем порядке:

1 3 5 7 
2 4 6 8 

Я хотел бы иметь это так:

1 2 3 4 
5 6 7 8 

Как бы решить эту проблему? Я бы предпочел только решение CSS, но я открыт для Javascript и jQuery-методов. В идеале я хотел бы использовать свойство row-count, но этого не существует.

Answer 1

Что делать, если вы просто изменили порядок изображений в своем html-файле?

<div class="grid"> 
    <img src="1.jpg"> 
    <img src="5.jpg"> 
    <img src="2.jpg"> 
    <img src="6.jpg"> 
    <img src="3.jpg"> 
    <img src="7.jpg"> 
    <img src="4.jpg"> 
    <img src="8.jpg"> 
</div> 

Answer 2

Либо изменить порядок картинок в HTML, как предложил @FradistaFicko или использовать Flexbox и вручную установить порядок изображений, помня также установить фиксированную высоту и ширину на контейнере.

скрипку здесь: https://jsfiddle.net/jwhwn62v/1/

.grid { 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
    flex 1 1; 
    height: 100vw; 
    width:100vw; 

} 

.grid img { 
    width: 33.33% ; 
    height: auto ; 
    margin: 5px; 
} 

.grid img:nth-child(3n+1) { 
    -webkit-box-ordinal-group: 1; 
    -webkit-order: 0; 
     -ms-flex-order: 0; 
      order: 0; 
} 
.grid img:nth-child(3n+2) { 
    -webkit-box-ordinal-group: 2; 
    -webkit-order: 1; 
     -ms-flex-order: 1; 
      order: 1; 
} 
.grid img:nth-child(3n+3) { 
    -webkit-box-ordinal-group: 3; 
    -webkit-order: 2; 
     -ms-flex-order: 2; 
      order: 2; 

} 

Answer 3

Использование display:flex и flex-wrap: wrap на .grid. На изображениях используйте width:25%; и flex: 1 0 25%, если вы хотите 4 подряд.

.grid { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 100vw; 
 
    height: auto; 
 
} 
 
img { 
 
    width: 25%; 
 
    height: auto; 
 
    flex: 0 1 25%; 
 
}

<div class='grid'> 
 
    <img src='http://placehold.it/50x50/000/fff?text=1'> 
 
    <img src='http://placehold.it/50x50/00f/fc0?text=2'> 
 
    <img src='http://placehold.it/50x50/0e0/000?text=3'> 
 
    <img src='http://placehold.it/50x50/cd6/d00?text=4'> 
 
    <img src='http://placehold.it/50x50/fff/000?text=5'> 
 
    <img src='http://placehold.it/50x50/b0b/dad?text=6'> 
 
    <img src='http://placehold.it/50x50/0ff/000?text=7'> 
 
    <img src='http://placehold.it/50x50/e00/fff?text=8'> 
 
</div>

Answer 4

body { 
    font: 1em/1.67 'Open Sans', Arial, Sans-serif; 
    margin: 0; 
    background: #e9e9e9; 
} 

.wrapper { 
    width: 95%; 
    margin: 3em auto; 
} 

.masonry { 
    margin: 1.5em 0; 
    padding: 0; 
    -moz-column-gap: 1.5em; 
    -webkit-column-gap: 1.5em; 
    column-gap: 1.5em; 
    font-size: .85em; 
} 

.item { 
    display: inline-block; 
    background: #fff; 
    padding: 1em; 
    margin: 0 0 1.5em; 
    width: 100%; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-shadow: 2px 2px 4px 0 #ccc; 
} 

@media only screen and (min-width: 400px) { 
    .masonry { 
     -moz-column-count: 2; 
     -webkit-column-count: 2; 
     column-count: 2; 
    } 
} 

@media only screen and (min-width: 700px) { 
    .masonry { 
     -moz-column-count: 3; 
     -webkit-column-count: 3; 
     column-count: 3; 
    } 
} 

@media only screen and (min-width: 900px) { 
    .masonry { 
     -moz-column-count: 4; 
     -webkit-column-count: 4; 
     column-count: 4; 
    } 
} 

@media only screen and (min-width: 1100px) { 
    .masonry { 
     -moz-column-count: 5; 
     -webkit-column-count: 5; 
     column-count: 5; 
    } 
} 

@media only screen and (min-width: 1280px) { 
    .wrapper { 
     width: 1260px; 

    } 
} 

** Пожалуйста, проверьте эту ссылку: - http://w3bits.com/css-masonry/ **