Cards Grid

by Renan Ribeiro Brando

HTML

<div class="cards">
  <div class="card bigger">
    <span>1</span>
  </div>
  <div class="card smaller">
    <span>2</span>
  </div>
  <div class="card smaller">
    <span>3</span>
  </div>
  <div class="card bigger">
    <span>4</span>
  </div>
  <div class="card smaller">
    <span>6</span>
  </div>
  <div class="card bigger">
    <span>7</span>
  </div>
</div>

CSS

.cards {
  column-count: 4;
}

.card {
  break-inside: avoid;
  column-gap: 16px;
  border: 1px solid;
}

.smaller {
  height: 120px;
}

.bigger {
  height: 200px;
}