Element overwriting another HTML/CSS

Question

Hello! My problem is this:

I made this grid followed by a button. On the desktop it appears correctly, but in mobile the button is superimposed on the grid... Does anyone have any idea what it might be?

(NOTE: The grid in total has 6 images, in print not all appear)

HTML

<div class="section-1-grid">
  <div class="section-1-grid-item"><img src="https://i.imgur.com/yVGoimh.png"></div>
  <div class="section-1-grid-item"><img src="https://i.imgur.com/yVGoimh.png"></div>
  <div class="section-1-grid-item"><img src="https://i.imgur.com/yVGoimh.png"></div>
  <div class="section-1-grid-item"><img src="https://i.imgur.com/yVGoimh.png"></div>
  <div class="section-1-grid-item"><img src="https://i.imgur.com/yVGoimh.png"></div>
  <div class="section-1-grid-item"><img src="https://i.imgur.com/yVGoimh.png"></div>
</div>
<center><a href="#"><button style="cursor: pointer;" class="button button-1">What we do</button></a></center>

CSS

.section-1-grid {
  display:grid;
  grid-template-columns:auto auto auto;
  margin:0 auto;
  width:90vw;
  grid-row-gap:5%;
  grid-column-gap:3%;
  margin-bottom:10vw;
}

.section-1-grid-item {
  border:none;
}

.button {
  border-radius:90px;
  padding:15px 30px;
  text-align:center;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:0.2em;
  display:inline;
  font-family:'Inter', sans-serif;
  font-size:0.8em;
  font-weight:800;
  transition: all 0.2s;
}

.button-1 {
  background:#212121;
  border:1px solid #212121;
  color:#fff;
}

.button-1:hover {
  background:transparent;
  color:#212121;
}

@media (max-width: 1024px) {

  .section-1-grid {
    display:grid;
    grid-template-columns:auto;
    width:90vw;
    grid-row-gap:1%;
  }
  
  .button {
    border-radius:90px;
    padding:4% 8%;
    font-size:1.8em;
    font-weight:800;
  }
  
}

Answer 1

Basically to use grid-row-gap in % you have to declare a height explicitly for the container father display:grid. If it’s not like that you have to learn the value of grid-row-gap in PX. Now the pq of this arbritário behavior I did not find a reliable source that exposes. Here is the official documentation of W#C on the Gutters https://drafts.csswg.org/css-grid/#gutters

Notice the image that I put a height of 700px, and the button kind of stayed where it should... the child elements that are making a overflow in the father

Notice now that image that I did not declare any time, and I used a value in PX in the grid-row-gap and it worked! In the example I put 20px and the btn was correctly in place