<ul class="container">
  <li class="item">
    <div class="content">
      <h3>1.</h3>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam voluptatibus hic laborum ea maiores, harum nobis. Placeat numquam ad laboriosam esse est porro, cum deserunt velit libero beatae quam necessitatibus. Iste sapiente commodi est labore amet quae rerum magni! Alias eum molestias sint nostrum optio ipsam quia delectus sunt. Rerum
    </div>
  </li>
  <li class="item">
    <div class="content">
      <h3>2.</h3>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatibus dolore natus ea
    </div>
  </li>
  <li class="item">
    <div class="content">
      <h3>3.</h3>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum consectetur dicta velit dolore pariatur provident magni, natus officia
    </div>
  </li>
  <li class="item">
    <div class="content">
      <h3>4.</h3>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi labore fugiat cupiditate totam, excepturi sit blanditiis magni nulla eaque, minima voluptatum, quaerat perferendis non harum atque provident expedita. Rem, reprehenderit?
    </div>
  </li>
  <li class="item">
    <div class="content">
      <h3>5.</h3>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa nobis ipsa et nesciunt sint fugit odio quasi sequi. Tempora doloribus soluta corrupti animi assumenda id veritatis maiores est hic quis!
      Deserunt earum, pariatur, maiores placeat dolorum delectus adipisci alias aperiam saepe temporibus est totam officia provident nemo voluptatum neque quae distinctio culpa, quod odit suscipit sit maxime? Autem, nam nihil?
      Debitis laborum harum optio
    </div>
  </li>
  <li class="item">
    <div class="content">
      <h3>6.</h3>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quas cum maiores placeat dolorum aperiam saepe temporibus
    </div>
  </li>
  <li class="item">
    <div class="content">
      <h3>7.</h3>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam cum, dicta molestias a quidem, amet reiciendis
    </div>
  </li>
  <li class="item">
    <div class="content">
      <h3>8.</h3>
      Lorem ipsum dolor sit amet, consectetur accusantium eum
    </div>
  </li>
  <li class="item">
    <div class="content">
      <h3>9.</h3>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Non nostrum incidunt fugit ducimus molestias libero praesentium excepturi nemo facilis tempore consequatur, sed porro cum nam, suscipit accusantium ad, laudantium minus.
      Qui ipsam iusto exercitationem expedita amet accusantium eum quisquam tempore ipsum impedit, at similique quos quidem. Sequi, aut asperiores delectus labore illo fugiat quia, a ut atque, quis facere reprehenderit!
      Ad dolor perspiciatis quidem, mollitia aspernatur dolorem commodi consequatur, assumenda
    </div>
  </li>
  <li class="item">
    <div class="content">
      <h3>10.</h3>
      Lorem placeat dolorum delectus adipisci alias aperiam saepe temporibus est totam officia provident nemo
    </div>
  </li>
  <li class="item">
    <div class="content">
      <h3>11.</h3>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad impedit ut, quia esse qui porro illo necessitatibus excepturi amet nesciunt aliquid delectus et. Pariatur
    </div>
  </li>
  <li class="item">
    <div class="content">
      <h3>12.</h3>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias odit, natus quaerat tempora sint minima velit mollitia libero sit, accusantium dolorem
    </div>
  </li>
  <li class="item">
    <div class="content">
      <h3>13.</h3>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates animi similique nihil quibusdam? Doloremque vel libero harum sapiente. Vitae minima culpa nihil a cum soluta voluptate praesentium
    </div>
  </li>
  <li class="item">
    <div class="content">
      <h3>14.</h3>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam aliquid in expedita quae voluptatibus doloremque maiores unde
    </div>
  </li>
  <li class="item">
    <div class="content">
      <h3>15.</h3>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse, incidunt ad minima aliquam sequi a eveniet. Ut ullam ipsum ipsam amet
    </div>
  </li>
  <li class="item">
    <div class="content">
      <h3>16.</h3>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi itaque veniam at labore consequuntur dicta adipisci ut laudantium deserunt
    </div>
  </li>
</ul>
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  margin: 10px;
  line-height: 1.2;
}

.container {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 1rem;
}

.item {
  border-radius: 0.5rem;
  &:nth-child(4n + 1) {
    background-color: #5B9BD5;
  }
  &:nth-child(4n + 2) {
    background-color: #ED7D31;
  }
  &:nth-child(4n + 3) {
    background-color: #FFC000;
  }
  &:nth-child(4n) {
    background-color: #70AD47;
  }
}

.content {
  padding: 1rem;
}

h3 {
  font-size: 20px;
  font-weight: bold;
  padding-bottom: 10px;
}
View Compiled 
const grid = document.querySelector(".container");
const allItems = document.querySelectorAll(".item");

const resizeGridItem = (item) => {
  rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue("grid-auto-rows"));
  rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue("grid-row-gap"));
  rowSpan = Math.ceil((item.querySelector(".content").getBoundingClientRect().height + rowGap) / (rowHeight + rowGap));
  item.style.gridRowEnd = `span ${rowSpan}`;
}

const resizeAllGridItems = () => {
  allItems.forEach(ele => {
    resizeGridItem(ele);
  });
}

window.onload = resizeAllGridItems();
window.addEventListener("resize", resizeAllGridItems);

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.