Masonry-Test1

Posted by Helmut_pdorf on 28 May 2020 14:10, last edited by Helmut_pdorf on 28 May 2020 14:11
Tags:

<style>
.grid * { box-sizing: border-box; }
 
.grid:after {
  content: '';
  display: block;
  clear: both;
}
 
.grid-sizer,
.grid-item {
  width: 100%;
}
@media (min-width: 576px) {
  .grid-sizer,
  .grid-item {
    width: 49%;
  }
}
@media screen and (min-width: 768px) {
  .grid-sizer,
  .grid-item {
    width: 32%;
  }
}
@media screen and (min-width: 1200px) { 
  .grid-sizer,
  .grid-item {
    width: 24%;
  }
}
 
.grid-item {
  height: 120px;
  float: left;
  background: #00997B;
  border: 1px solid #333;
  border-color: hsla(0, 0%, 0%, 0.5);
  border-radius: 5px;
  margin-bottom: 20px;
}
 
.grid-item--height2 { height: 200px; }
.grid-item--height3 { height: 260px; }
.grid-item--height4 { height: 360px; }
</style>
 
<div class="container-fluid">
  <div class="grid" data-masonry='{ "itemSelector": ".grid-item",  "columnWidth": ".grid-sizer", "percentPosition": true, "gutter": 10}'>
    <div class="grid-sizer"></div>
    <div class="grid-item">item 1</div>
    <div class="grid-item grid-item--width2 grid-item--height2">item 2</div>
    <div class="grid-item grid-item--height3">item 3</div>
    <div class="grid-item grid-item--height2">item 4</div>
    <div class="grid-item .grid-item--width2">item 5</div>
    <div class="grid-item">item 6</div>
    <div class="grid-item">item 7</div>
    <div class="grid-item grid-item--height2">item 8</div>
    <div class="grid-item grid-item--width2 grid-item--height3">item 9</div>
    <div class="grid-item">item 10</div>
    <div class="grid-item grid-item--height2">item 11</div>
    <div class="grid-item">item 12</div>
    <div class="grid-item grid-item--width2 grid-item--height2">item 13</div>
    <div class="grid-item grid-item--width2">item 14</div>
    <div class="grid-item">item 15</div>
    <div class="grid-item grid-item--height2">item 16</div>
    <div class="grid-item">item 17</div>
    <div class="grid-item">item 18</div>
    <div class="grid-item grid-item--height3">item 19</div>
    <div class="grid-item grid-item--height2">item 20</div>
    <div class="grid-item">item 21</div>
    <div class="grid-item">item 22</div>
    <div class="grid-item grid-item--height2">item 23</div>
  </div>
</div>

---

+ Show Backlinks

Backlinks (Links to this page from others):

+ Show Comments

Comments:

Number of Comments: 0)