JSFiddle - React, Tailwind, and code Playground

HTML

<main>
        <div class="row">
            <div class="col">1</div>
            <div class="col">1</div>
            <div class="col">1</div>
            <div class="col">1</div>
            <div class="col">1</div>
            <div class="col">1</div>
            <div class="col">1</div>
            <div class="col">1</div>
            <div class="col">1</div>
            <div class="col">1</div>
            <div class="col">1</div>
            <div class="col">1</div>
        </div>
        <div class="row">
            <div class="col _2">2</div>
            <div class="col _2">2</div>
            <div class="col _2">2</div>
            <div class="col _2">2</div>
            <div class="col _2">2</div>
            <div class="col _2">2</div>
        </div>
        <div class="row">
            <div class="col _4">4</div>
            <div class="col _4">4</div>
            <div class="col _4">4</div>
        </div>
        <div class="row">
            <div class="col _3">3</div>
            <div class="col _3">3</div>
            <div class="col _3">3</div>
            <div class="col _3">3</div>
        </div>
        <div class="row">
            <div class="col _6">6</div>
            <div class="col _6">6</div>
            <div class="col _6">6</div>
            <div class="col _6">6</div>
            <div class="col _6">6</div>
            <div class="col _6">6</div>
        </div>
</main>

CSS

:root {
  --col-count: 12;
  --col-gap: 2px;
  --base-width: calc(100% / var(--col-count) - var(--col-gap) * 2);
  --col-1: calc(var(--base-width));
  --col-2: calc(var(--col-1) * 2);
  --col-3: calc(var(--col-1) * 3);
  --col-4: calc(var(--col-1) * 4);
  --col-5: calc(var(--col-1) * 5);
  --col-6: calc(var(--col-1) * 6);
  --col-7: calc(var(--col-1) * 7);
  --col-8: calc(var(--col-1) * 8);
  --col-9: calc(var(--col-1) * 9);
  --col-10: calc(var(--col-1) * 10);
  --col-11: calc(var(--col-1) * 11);
  --col-12: calc(var(--col-1) * 12);
  --sub-col: calc(var(--col-1) / 2);
}

.row {
  margin: 2px auto;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: center;
  line-height: 24px;
  font-size: 16px;
}

.col {
  flex: 1 0 var(--col-1);
  max-width: calc(100% - var(--col-margin) * 2);
  box-shadow: -1px -1px 0 red inset, 1px 1px 0 red inset;
  margin: 2px;
}

.col._2 { flex: 1 0 var(--col-2); }
.col._3 { flex: 1 0 var(--col-3); }
.col._4 { flex: 1 0 var(--col-4); }
.col._6 { flex: 1 0 var(--col-6); }

@media (max-width: 970px) {
  :root { --col-count: 6; }
}

@media (max-width: 640px) {
  :root { --col-count: 3; }
}

@media (max-width: 480px) {
  :root { --col-count: 1; }
}