1

Olá! Meu problema é o seguinte:

Fiz esse grid seguido de um botão. No desktop ele aparece corretamente, porém no mobile o botão fica sobreposto no grid... Alguém tem ideia do que pode ser?

(OBS: O grid no total tem 6 imagens, no print não aparecem todas)

No desktop No mobile

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;
  }
  
}

1 Resposta 1

0

Basicamente para usar grid-row-gap em % vc tem que declara uma altura de forma explícita para o container pai display:grid. Se não for assim vc tem que delcarar o valor de grid-row-gap em PX. Agora o pq desse comportamento arbritário eu não achei uma fonte confiável que expleque. Aqui tem a documentação oficial da W#C sobre os Gutters https://drafts.csswg.org/css-grid/#gutters

Repare na imagem que eu coloquei uma altura de 700px, e o botão meio que ficou onde deveria... os elementos filhos que estão fazendo um overflow no pai

inserir a descrição da imagem aqui

Repare agora nessa imagem que eu não declarei altura alguma, e usei um valor em PX no grid-row-gap e deu certo! No exemplo eu coloquei 20px e o btn ficou corretamente no lugar

inserir a descrição da imagem aqui

2
  • Perfeito! Muito obrigado! :D
    – user221421
    31/01/2021 às 1:55
  • @eaesergio o Grid CSS ainda é muito novo, na verdade nem tanto, mas para alguns browser é uma implantação recente, então ainda tem muita coisinha desse tipo que não funciona direito. Abs
    – hugocsl
    31/01/2021 às 10:36

Você deve fazer log-in para responder a esta pergunta.