<div class="grid">
  <div class="item">
    <h3>Card title</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi expedita veritatis quibusdam quas facilis soluta deserunt aliquid molestias unde culpa. Voluptatibus doloribus doloremque harum ratione?</p>
  </div>
  <div class="item">
    <h3>Card title</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas eligendi itaque odio aliquid excepturi vel corrupti deserunt veniam fuga perspiciatis! Nihil obcaecati quos similique consequatur dolore. Natus, corrupti.</p>
  </div>
  <div class="item">
    <h3>Card title</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur corporis porro mollitia praesentium quis minus.</p>
  </div>
  <div class="item">
    <h3>Card title</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, iusto consectetur. Corporis consequatur architecto consequuntur blanditiis delectus sed aut, sint nihil ipsam voluptates quasi iure accusamus veniam quia soluta reprehenderit, quo quos!</p>
  </div>
  <div class="item">
    <h3>Card title</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum ut repellat odit dolorem modi sapiente praesentium voluptas ullam placeat nostrum enim eligendi, commodi vitae recusandae in expedita architecto ex labore rem! Commodi, modi.</p>
  </div>
  <div class="item">
    <h3>Card title</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo repellendus ex obcaecati facilis voluptatum corporis suscipit enim debitis quisquam!</p>
  </div>
  <div class="item">
    <h3>Card title</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio, maxime eum culpa facere sunt, inventore iste tenetur dignissimos perspiciatis quaerat quibusdam tempora.</p>
  </div>
  <div class="item">
    <h3>Card title</h3>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic dolores illo aliquam!</p>
  </div>
  <div class="item">
    <h3>Card title</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum quibusdam, placeat aliquid nam nemo earum, quos tenetur non architecto labore ullam aspernatur iure tempora numquam beatae reiciendis?</p>
  </div>
  <div class="item">
    <h3>Card title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, nesciunt similique.</p>
  </div>
</div>

.grid {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        350px, /* min value */
        1fr /* max value */
      )
    );
  gap: 20px;
}

.item {
  padding: 1.35rem;
  background: #90bcbc;
  border-radius: 4px;
}

h3 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}


body {
  padding: 20px;
  color: #332182;
}