<div class="container">
  <ul>
  <li>
    Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip.
  </li>
  <li>
    Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. 
  </li>
  <li>
    Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery.
  </li>
</ul>
  
  <div class="item">
    I am not part of the list and am a direct child of the grid container.
  </div>
</div>

* { box-sizing: border-box;}

body {
  
  font: 1.2em/1.5 Roboto, sans-serif;
  background: #d9a7c7;
background: linear-gradient(to right, #d9a7c7, #fffcdc); 
  padding-top: 100px;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 5px solid #3c1053;
  grid-column: 1 / 4;
  display: grid;
  grid-template-columns: subgrid;
  grid-gap: 10px;
}

li, .item {
  background: #ad5389;  
  background: linear-gradient(to right, #3c1053, #ad5389); 
  border-radius: 1em;
  color: #fff;
  padding: 1em;
}

.item {
  background: #41295a;
  background: linear-gradient(to right, #2F0743, #41295a);
  
}

.box:first-child {
  margin-left: 0 ;
}