JSFiddle - React, Tailwind, and code Playground

by Alex Myronov

HTML

<div class="grid">
  <div class="row">
    <div>1</div>
    <div>1</div>
    <div>1</div>
  </div>
  <div class="row2">
    <div>2</div>
    <div>2</div>
  </div>
  <div class="row3">
    <div>3</div>
  </div>
  <div class="row">
    <div>1</div>
  </div>
  <div class="row2">
    <div>2 - - -- - - -- - - -- - -- - - - -- - -- - - - - -- -- - - </div>
    <div>2</div>
    <div>2</div>
    <div>2</div>
  </div>
  <div class="row3">
    <div>3</div>
  </div>
  <div class="row">
    <div>1</div>
  </div>
  <div class="row2">
    <div>2</div>
  </div>
  <div class="row3">
    <div>3</div>
  </div>
</div>

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  grid-gap: 5px;
  outline: 2px dashed red;
}

.row {
  background-color: #5879c5;
  text-align: center;
  font-weight: bold;
}

.row2 {
  background-color: #c5b07f;
  text-align: center;
  font-weight: bold;
}

.row3 {
  background-color: #e0ffef;
  text-align: center;
  font-weight: bold;
}