Doubt about CSS Grid and Firefox

Asked

Viewed 80 times

4

Good night. I recently started to study CSS, but when I was doing an exercise I came across an unusual situation, I am using CSS Grid along with Flexbox, when I review my site in the browsers Opera and Chrome the layout is presented correctly as in the image below:

inserir a descrição da imagem aqui

But when I re-screen the same site in Firefox/Developer and Microsoft Edge browsers, the result is this:

inserir a descrição da imagem aqui

For some reason I don’t know it seems that the browsers Firefox and Edge ignore the value of the first line of the grid-template-Row (correct me if I’m wrong), while in the other browsers it considers the value of the grid normally. Someone would know to tell me the reason of this occur, I have searched in several places and I did not find a answer, I will be making available my code right below, already thank very much who can help me.

  *{
    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>

css html5 grid flexbox
  • 2

    browsers can render things differently. In your case looking at the layout, Chrome seems to apply a padding to the "header" element, which makes the "div-header" more "centered" vertically. As there is no padding nor height in the "header" it is rendering this at will. Put a height: 70px; in the header and see with renderiza in all browsers for example

  • Hello, thank you so much for the answer! I managed to solve the problem using height, all browsers render in the same way. I just found it strange that Firefox does not consider in any way grid-template-Row when using percentage, I did some tests using the fr and pixel units and managed to standardize the display in the browsers.

1 answer

3


Grid it’s still kind of bizarre with some things, but initially incredible that it seems Chrome’s behavior is right, because he who is making the correct ratio 20/80. (If you notice of course that the gray header bar in Firefox does not have 20% of the ratio.)

Now to let Chrome equal is in Firefox just adjust here using fit-content()

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

inserir a descrição da imagem aqui

You can read more about fit-content here, and his behavior is something similar auto used as 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>

  • Hello, thank you so much for answering! I did not have knowledge about fit-content(), I will study the link you provided. After some attempts I was able to replicate the result of Chorme in Firefox using fr as drives.

  • 1

    @Laura-2035 without a problem. If you think the answer solved the problem remember to mark it as accepted by clicking on this icon below the arrows next to the answer ;)

Browser other questions tagged css html5 grid flexbox

You are not signed in. Login or sign up in order to post.