JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="page">
  <div class="grid-items">
    <div class="grid-item items-15">A</div>
    <div class="grid-item items-15">B</div>
    <div class="grid-item items-15">A</div>
    <div class="grid-item items-15">B</div>
    <div class="grid-item items-15">A</div>
    <div class="grid-item items-15">B</div>
    <div class="grid-item items-15">A</div>
    <div class="grid-item items-15">B</div>
    <div class="grid-item items-15">A</div>
    <div class="grid-item items-15">B</div>
    <div class="grid-item items-15">B</div>
    <div class="grid-item items-15">B</div>
    <div class="grid-item items-15">B</div>
    <div class="grid-item items-15">B</div>
    <div class="grid-item items-15">B</div>
  </div>
</div>

SCSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.page {
  height: 100vh;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
}

.grid-items {
  display: block !important;
  height: 100vh;
  text-align: center;
  font-size: 1.4em;
  column-count: 2;
  column-gap: 0;

  .grid-item {
    display: block;
    break-inside: avoid-column;
  }

  .grid-item p {
    font-size: 1.2vh !important;
  }

  .items-2 {
    height: 100% !important;
  }

  .items-3:nth-child(-n+2) {
    height: 50% !important;
  }

  .items-3:nth-child(n+3) {
    height: 100% !important;
  }

  .items-4 {
    height: 50% !important;
  }

  .items-5:nth-child(-n+3) {
    height: 33.3% !important;
  }

  .items-5:nth-child(n+4) {
    height: 50% !important;
  }

  .items-6 {
    height: 33.3% !important;
  }

  .items-7:nth-child(-n+4) {
    height: 25% !important;
  }

  .items-7:nth-child(n+5) {
    height: 33.3% !important;
  }

  .items-8 {
    height: 25% !important;
  }

  .items-9:nth-child(-n+5) {
    height: 20% !important;
  }

  .items-9:nth-child(n+6) {
    height: 25% !important;
  }

  .items-10 {
    height: 20% !important;
  }

  .items-11:nth-child(-n+6) {
    height: 16.6% !important;
  }

  .items-11:nth-child(n+7) {
    height: 20% !important;
  }

  .items-12 {
    height: 25% !important;
  }

  .items-13:nth-child(-n+7) {
    height: 14.28% !important;
  }

  .items-13:nth-child(n+8) {
    height: 16.6% !important;
  }

  .items-14 {
    height: 14.28% !important;
  }

  .items-15:nth-child(-n+8) {
    height: 12.5% !important;
  }

  .items-15:nth-child(n+9) {
    height: 14.28% !important;
  }

}