Avoid make parent height smaller than children when using display grid

Question

I have this markup:

<section>
 <ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  ...

And CSS:

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2% 1%;
}

li {
  height: 200px;
  background: orange;
}

The problem <section> is not following the <ul> height's. It's smaller.

https://codepen.io/marcelo-villela-gusm-o/pen/GRRerxQ