JSFiddle - React, Tailwind, and code Playground

by Konstantin Rouda

HTML

<section class="c-container">
  <article class="c-item">A</article>
  <article class="c-item">B</article>
  <article class="c-item">C</article>
  <article class="c-item">D</article>
</section>

CSS

* {
  box-sizing: border-box;
  color: rgba(30, 30, 30, .9);
}

.c-container {
  display: grid;
  grid-template-columns: [item-place] 1fr;
  grid-template-rows: [item-place] 1fr;
  grid-auto-flow: column;
  width: 100vw;
  height: 100vh;
  border: 1px solid;
}

.c-item {
  grid-column: item-place;
  grid-row: item-place;
  background: cornflowerblue;
}

.c-item:nth-child(2) {
  background: purple;
}


.c-item:nth-child(3) {
  background: pink;
}

.c-item:nth-child(4) {
  background: firebrick;
}

.c-item:nth-last-child {
  background: yellow;
}