JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<div class="feedWrapper">

  <div class="grid-item">
    <div class="inner">
      <div class="content">
        <p>Content goes here</p>
      </div>
    </div>
  </div>

  <div class="grid-item">
    <div class="inner">
      <div class="content">
        <p>Content goes here, so this one is gonna be taller than the 1st and 3rd one...</p>
      </div>
    </div>
  </div>

  <div class="grid-item">
    <div class="inner">
      <div class="content">
        <p>Content goes here for 3rd item</p>
      </div>
    </div>
  </div>

  <div class="grid-item">
    <div class="inner">
      <div class="content">
        <p>4th Content goes here</p>
      </div>
    </div>
  </div>

  <div class="grid-item">
    <div class="inner">
      <div class="content">
        <p>5th item is this one</p>
      </div>
    </div>
  </div>

  <div class="grid-item">
    <div class="inner">
      <div class="content">
        <p>6th item</p>
      </div>
    </div>
  </div>

  <div class="grid-item">
    <div class="inner">
      <div class="content">
        <p>7th Content goes here, 7th Content goes here, 7th Content goes here, 7th Content goes here,</p>
      </div>
    </div>
  </div>

  <div class="grid-item">
    <div class="inner">
      <div class="content">
        <p>8th item is this one</p>
      </div>
    </div>
  </div>

  <div class="grid-item">
    <div class="inner">
      <div class="content">
        <p>9th item</p>
      </div>
    </div>
  </div>


</div>

CSS

/* basic simple reset: */
*,
::before,
::after {
  box-sizing: border-box;
  font: normal 1rem / 1.5 sans-serif;
  margin: 0;
  padding: 0;
}

.feedWrapper {
  /* here we use display: grid: */
  display: grid;
  /* a gap between adjacent rows/columns: */
  gap: 0.5em;
  /* here we define 3 columns, each taking
     an equal amount of space (so 3 columns,
     each taking 33% of the total space), but
     setting a minimum size of 10px (adjust to
     suit your preference): */
  grid-template-columns: repeat(3, minmax(10px, 1fr));
}

.inner {
  /* again, using CSS Grid layout: */
  display: grid;
  /* taking the full height of the parent: */
  height: 100%;
}

.content {
  border: 1px solid red;
}