4

Boa noite. Recentemente comecei a estudar CSS, porém quando estava fazendo um exercício me deparei com uma situação inusitada, estou utilizando CSS Grid juntamente com Flexbox, quando renderizo meu site nos navegadores Opera e Chrome o layout é apresentado corretamente como na imagem abaixo:

inserir a descrição da imagem aqui

Porém quando renderizo o mesmo site nos navegadores Firefox/Developer e Microsoft Edge, o resultado é este:

inserir a descrição da imagem aqui

Por alguma razão da qual desconheço parece que os navegadores Firefox e Edge ignoram o valor da primeira linha do grid-template-row (me corrijam se eu estiver errada), enquanto nos outros navegadores ele considera o valor do grid normalmente. Algúem saberia me dizer a razão disto ocorrer, já procurei em diversos lugares e não encontrei uma respota, estarei disponibilizando meu código logo abaixo, desde já agradeço muito quem puder me ajudar.

  *{
    margin:0px;
    padding: 0px;
}
body{
    display: grid;
    grid-template: 20% 1fr / 10% 80% 10%; 
    font-family: 'Lato';
    letter-spacing: 2px;
    
}
header{
    display: flex;
    flex-direction: row;
    background-color: rgb(222, 226, 228);
    justify-content: center;
    align-items: center;
    text-align: center;
    grid-column-start: 2;
    grid-column-end: 3;
}
main{
    display: flex;
    flex-direction: row;
    justify-content: center;
    grid-column-start: 2;
    grid-column-end: 3;
}
.flex-content{
    display: flex;
   
    background-color: lightblue;
    
}
.flex-content img{
    width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />
    <link rel="stylesheet" type="text/css" href="tributePage.css" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@bold&display=swap" rel="stylesheet">
    <title>Tribute Page</title>
<style>
  
</style>   
</head>
<body>
    <header>
        <div class="div-header">
            <h1 class="title">Dr. Norman Borlaug</h1>
            <p class="subtitle">The man who saved a billion lives</p>
        </div>
    </header>
    <main>
        <div class="flex-content">
            <img src="https://images.squarespace-cdn.com/content/v1/5256f6e4e4b086e2b62842e2/1421589861526-NLMVFC4TD9JMJI8CMFQ7/ke17ZwdGBToddI8pDm48kEyC40P1F2hXYCxhbEKOdLd7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UdyvV08SFYj9gwm3wBWj1Zi2Od6C6Yx-I5pWLrMUTvnOxrxjPk_CVDSDL5ouV0jMuQ/image-asset.jpeg" />
        </div>
    </main>
</body>
</html>

2
  • 2
    os navegadores podem renderizar ligeriamente diferente as coisas. No teu caso olhando para o layout, o Chrome parece aplicar um padding no elemento "header", que faz o "div-header" ficar mais "centralizado" na vertical. Como não há padding nem height no "header" ele está renderizando isso a vontade. Coloque um height: 70px; no header e veja com renderiza em todos os browsers por exemplo Commented 9/03/2021 às 9:42
  • Olá, muito obrigada pela resposta! Consegui solucionar o problema utilizando o height, todos os navegadores renderizam da mesma forma. Só achei bem estranho o Firefox não considerar de forma alguma grid-template-row quando utilizo porcentagem, fiz alguns testes utilizando as unidades fr e pixel e consegui padronizar o exibição nos navegadores.
    – laura-2035
    Commented 10/03/2021 às 0:20

1 Resposta 1

3

Grid ainda é meio bizarro com algumas coisas, mas inicialmente por incrível que pareça o comportamento do Chrome está certo, pois ele que está fazendo a proporção correta 20/80. (Se você observar é claro que a barra cinza do header no Firefox não tem 20% da proporção.)

Agora para deixar o Chrome igual está no Firefox basta ajustar aqui usando fit-content()

grid-template: fit-content(20%) 1fr / 10% 80% 10%;

inserir a descrição da imagem aqui

Você pode ler mais sobre fit-content aqui, e o comportamento dele é algo similar como se fosse auto usado como height https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content()

* {
  margin: 0px;
  padding: 0px;
}

body {
  display: grid;
  /* grid-template: 20% 1fr / 10% 80% 10%; */
  font-family: 'Lato';
  letter-spacing: 2px;

  grid-template: fit-content(20%) 1fr / 10% 80% 10%;

}

header {
  display: flex;
  flex-direction: row;
  background-color: rgb(222, 226, 228);
  justify-content: center;
  align-items: center;
  text-align: center;
  grid-column-start: 2;
  grid-column-end: 3;
}

main {
  display: flex;
  flex-direction: row;
  justify-content: center;
  grid-column-start: 2;
  grid-column-end: 3;
}

.flex-content {
  display: flex;

  background-color: lightblue;

}

.flex-content img {
  width: 100%;
}
<body>
  <header>
    <div class="div-header">
      <h1 class="title">Dr. Norman Borlaug</h1>
      <p class="subtitle">The man who saved a billion lives</p>
    </div>
  </header>
  <main>
    <div class="flex-content">
      <img src="https://images.squarespace-cdn.com/content/v1/5256f6e4e4b086e2b62842e2/1421589861526-NLMVFC4TD9JMJI8CMFQ7/ke17ZwdGBToddI8pDm48kEyC40P1F2hXYCxhbEKOdLd7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UdyvV08SFYj9gwm3wBWj1Zi2Od6C6Yx-I5pWLrMUTvnOxrxjPk_CVDSDL5ouV0jMuQ/image-asset.jpeg" />
    </div>
  </main>
</body>

2
  • Olá, muito obrigada por responder! Eu não possuía conhecimento sobre o fit-content(), vou estudar o link que você disponibilizou. Depois de algumas tentativas consegui replicar o resultado do Chorme no Firefox utilizando os fr como unidades.
    – laura-2035
    Commented 10/03/2021 às 0:26
  • 1
    @laura-2035 sem problemas. Se vc achar que a resposta resolveu o problema lembre-se de marca-la como aceita, clicando nesse ícone ✔︎ abaixo das setinhas ao lado da resposta ;)
    – hugocsl
    Commented 10/03/2021 às 1:45

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .