JSFiddle - React, Tailwind, and code Playground

by Pankaj Kargirwar

HTML

<div class="grid-3x4">
  <div>Aasdfasasdfsadfsadfsadf asdfasddfsadf sadfsadfasdfasdf sadfsadfasdfasdf sadfsadfasdfasdf sadfsadfasdfasdf</div>
  <div>B</div>
  <div>C</div>
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

CSS

.grid-3x4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-areas:
    'a b c '
    'd e f'
    'g h i'
    'l m n';
}

.grid-3x4 > div {
  min-height: 10vh;
  max-height: 10vh;
  overflow: hidden;
}