ao adicionar o " grid-gap: .2rem" na classe ".destaques" no CSS, conforme o professor fez (7:27 do vídeo), apareceu uma barra de rolagem na horizontal quando atualizei a página no navegador, o que não aconteceu no vídeo. Como corrigir?
ao adicionar o " grid-gap: .2rem" na classe ".destaques" no CSS, conforme o professor fez (7:27 do vídeo), apareceu uma barra de rolagem na horizontal quando atualizei a página no navegador, o que não aconteceu no vídeo. Como corrigir?
Olá Cândida, tudo bem?
Primeiramente peço desculpas pela demora em responder!
Muitos alunos também tiveram essa alteração no código e o instrutor do curso nos deixou uma solução, você pode saber mais clicando aqui.
Basicamente, nós havíamos criado quatro colunas com a largura de 25%, entretanto temos um espaçamento entre elas de .2rem. Para que a barra de rolagem horizontal não apareça, é necessário tirar esse espaçamento na hora de definir a largura das colunas.
Para solucionar essa qestão, podemos usar uma nova unidade de medida que veio com o Grid Layout, a fr:
grid-template-columns: 1fr 1fr 1fr 1fr;fr é referente a fração, ou seja, 1fr será uma parte do espaço disponível. Com isso, estamos "pedindo" para que seja ocupado todo o espaço disponível independente do tamanho.
Na solução do instrutor, há outras formas de chegarmos a esse resultado também, recomendo você dar uma passadinha por lá para saber mais sobre essa alteração.
Espero ter ajudado, abraços!