<div class="box">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
  <div>Item 7</div>
  <div>Item 8</div>
</div>

<div class="box">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4 has much more text in it than the other items.</div>
    <div>Item 5</div>
  <div>Item 6</div>
  <div>Item 7</div>
  <div>Item 8</div>
</div>

* { box-sizing: border-box; }
body {
  padding: 40px;
  background-color: rgb(255,255,255);
  color: rgb(61, 63, 112);
  font: 2.2em/1.4 "Open Sans", sans-serif;
}

.box {
  padding: 10px;
   border: 5px dotted rgba(61, 63, 112,.7);
  margin-bottom: 2em;
  width: 800px;
  display: grid;
  grid-template-columns: repeat(4, fit-content(15ch));
}


.box > div {
  border: 5px solid rgb(61, 63, 112);
  background-color: rgba(61, 63, 112,.7);
  color: #fff;
  border-radius: 10px;
  padding: 10px;
}