CSS Masonry

Used random height in SCSS

by Faisal Khan Janjua

HTML

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

SCSS

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 6 200px;
  column-gap: 10px;
  & li {
    width: 150px;
    background: #EC985A;
    color: white;
    margin: 0 10px 10px 0;
    display: inline-block;
    width: 100%;
    
    min-height: 100px;
    border: 1px solid #666;
  }
}
@for $i from 1 through 36 { 
  li:nth-child(#{$i}) {
    $h: (random(400) + 100) + px;
    height: $h;
    line-height: $h;
  }
}