xxxxxxxxxx1
<div class="container-fluid">2
3
<h1 class="my-4 font-weight-bold">Masonry - columnWidth</h1>4
5
<div class="grid">6
<div class="grid-item"></div>7
<div class="grid-item grid-item--width2 grid-item--height2"></div>8
<div class="grid-item grid-item--height3"></div>9
<div class="grid-item grid-item--height2"></div>10
<div class="grid-item .grid-item--width2"></div>11
<div class="grid-item"></div>12
<div class="grid-item"></div>13
<div class="grid-item grid-item--height2"></div>14
<div class="grid-item grid-item--width2 grid-item--height3"></div>15
<div class="grid-item"></div>16
<div class="grid-item grid-item--height2"></div>17
<div class="grid-item"></div>18
<div class="grid-item grid-item--width2 grid-item--height2"></div>19
<div class="grid-item grid-item--width2"></div>20
<div class="grid-item"></div>21
<div class="grid-item grid-item--height2"></div>22
<div class="grid-item"></div>23
<div class="grid-item"></div>24
<div class="grid-item grid-item--height3"></div>25
<div class="grid-item grid-item--height2"></div>26
<div class="grid-item"></div>27
<div class="grid-item"></div>28
<div class="grid-item grid-item--height2"></div>29
</div>30
31
</div>xxxxxxxxxx1
* { box-sizing: border-box; }2
3
.grid:after {4
content: '';5
display: block;6
clear: both;7
}8
9
.grid-item {10
width: 160px;11
height: 120px;12
float: left;13
background: #00997B;14
border: 1px solid #333;15
border-color: hsla(0, 0%, 0%, 0.5);16
border-radius: 5px;17
margin-bottom: 20px;18
}19
20
.grid-item--width2 { width: 340px; }21
.grid-item--width3 { width: 520px; }22
.grid-item--width4 { width: 780px; }23
24
.grid-item--height2 { height: 200px; }25
.grid-item--height3 { height: 260px; }26
.grid-item--height4 { height: 360px; }xxxxxxxxxx1
$('.grid').masonry({2
itemSelector: '.grid-item',3
columnWidth: 160,4
gutter: 205
}); Console errors: 0