CSS columns + sticky WTF

by phloe

HTML

<ol class="columns">
  <li class="item item--sticky"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item item--small"></li>
  <li class="item item--small"></li>
  <li class="item item--small"></li>
</ol>

CSS

.columns {
  margin: 0;
  padding: 0;
  display: block;
  column-gap: 40px;
  column-count: 2;
}

.item {
  list-style: none;
  min-height: 200px;
  background-color: #8D9EC6;
}

.item--sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #51D6FF;
  page-break-after: column;
  break-after: column;
}

.item--small {
  min-height: 100px;
}

.item:nth-child(n+3) {
  margin-top: 40px;
}