xxxxxxxxxx1
<div class="masonry-with-flex">2
<div>3
14
</div>5
<div>6
27
</div>8
<div>9
310
</div>11
<div>12
413
</div>14
<div>15
516
</div>17
<div>18
619
</div>20
<div>21
722
</div>23
<div>24
825
</div>26
<div>27
928
</div>29
<div>30
1031
</div>32
<div>33
1134
</div>35
<div>36
1237
</div>38
<div>39
1340
</div>41
<div>42
1443
</div>44
<div>45
1546
</div>47
</div>xxxxxxxxxx1
body {2
margin: 0;3
padding: 1rem;4
}5
.masonry-with-flex {6
display: -webkit-box;7
display: -webkit-flex;8
display: -ms-flexbox;9
display: flex;10
-webkit-box-orient: vertical;11
-webkit-box-direction: normal;12
-webkit-flex-direction: column;13
-ms-flex-direction: column;14
flex-direction: column;15
-webkit-flex-wrap: wrap;16
-ms-flex-wrap: wrap;17
flex-wrap: wrap;18
max-height: 1000px; }19
.masonry-with-flex div {20
width: auto;21
background: #975A58;22
color: white;23
margin: 0 1rem 1rem 0;24
text-align: center;25
font-weight: 900;26
font-size: 2rem; }27
.masonry-with-flex div:nth-child(1) {28
height: 334px;29
line-height: 334px; }30
.masonry-with-flex div:nth-child(2) {31
height: 428px;32
line-height: 428px; }33
.masonry-with-flex div:nth-child(3) {34
height: 432px;35
line-height: 432px; }36
.masonry-with-flex div:nth-child(4) {37
height: 292px;38
line-height: 292px; }39
.masonry-with-flex div:nth-child(5) {40
height: 312px;41
line-height: 312px; }42
.masonry-with-flex div:nth-child(6) {43
height: 191px;44
line-height: 191px; }45
.masonry-with-flex div:nth-child(7) {46
height: 302px;47
line-height: 302px; }48
.masonry-with-flex div:nth-child(8) {49
height: 224px;50
line-height: 224px; }51
.masonry-with-flex div:nth-child(9) {52
height: 475px;53
line-height: 475px; }54
.masonry-with-flex div:nth-child(10) {55
height: 440px;56
line-height: 440px; }57
.masonry-with-flex div:nth-child(11) {58
height: 426px;59
line-height: 426px; }60
.masonry-with-flex div:nth-child(12) {61
height: 362px;62
line-height: 362px; }63
.masonry-with-flex div:nth-child(13) {64
height: 129px;65
line-height: 129px; }66
.masonry-with-flex div:nth-child(14) {67
height: 344px;68
line-height: 344px; }69
.masonry-with-flex div:nth-child(15) {70
height: 236px;71
line-height: 236px; }72
.masonry-with-flex div:nth-child(16) {73
height: 378px;74
line-height: 378px; }75
.masonry-with-flex div:nth-child(17) {76
height: 312px;77
line-height: 312px; }78
.masonry-with-flex div:nth-child(18) {79
height: 172px;80
line-height: 172px; }81
.masonry-with-flex div:nth-child(19) {82
height: 474px;83
line-height: 474px; }84
.masonry-with-flex div:nth-child(20) {85
height: 252px;86
line-height: 252px; }87
.masonry-with-flex div:nth-child(21) {88
height: 355px;89
line-height: 355px; }90
.masonry-with-flex div:nth-child(22) {91
height: 401px;92
line-height: 401px; }93
.masonry-with-flex div:nth-child(23) {94
height: 369px;95
line-height: 369px; }96
.masonry-with-flex div:nth-child(24) {97
height: 449px;98
line-height: 449px; }99
.masonry-with-flex div:nth-child(25) {100
height: 411px;101
line-height: 411px; }102
.masonry-with-flex div:nth-child(26) {103
height: 122px;104
line-height: 122px; }105
.masonry-with-flex div:nth-child(27) {106
height: 262px;107
line-height: 262px; }108
.masonry-with-flex div:nth-child(28) {109
height: 154px;110
line-height: 154px; }111
.masonry-with-flex div:nth-child(29) {112
height: 308px;113
line-height: 308px; }114
.masonry-with-flex div:nth-child(30) {115
height: 327px;116
line-height: 327px; }117
.masonry-with-flex div:nth-child(31) {118
height: 374px;119
line-height: 374px; }120
.masonry-with-flex div:nth-child(32) {121
height: 106px;122
line-height: 106px; }123
.masonry-with-flex div:nth-child(33) {124
height: 340px;125
line-height: 340px; }126
.masonry-with-flex div:nth-child(34) {127
height: 492px;128
line-height: 492px; }129
.masonry-with-flex div:nth-child(35) {130
height: 475px;131
line-height: 475px; }132
.masonry-with-flex div:nth-child(36) {133
height: 373px;134
line-height: 373px; }1
1
Console errors: 0