CSS grid behaviour different in Chrome and Firefox [duplicate]

问题

I have a css grid with 2 columns and 3 rows. The third row content is not always present because of an angular ngif clause. An image is present in the first column that spans the 3 rows. With all that said, I get 2 different results in Chrome (80.0.3987.87, which is the latest stable as I post) and Firefox.

Is there a way to control the rows so that it behaves like in Firefox, i.e. the third row grows when the image height is bigger than the 2 first row heights combined.

.grid {
  width:400px;
  display:grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: minmax(0, auto) minmax(0, auto) minmax(0, 1fr);
}

.image {
  width:40px;
  height:100px;
  grid-column:1;
  grid-row:1 / span 3;
  background-color: #f00;
}

.text1 {
  grid-column:2;
  grid-row:1;
}

.text2 {
  grid-column:2;
  grid-row:2;
}

<div class="grid">
  <div class="image"></div>
  <div class="text1">Text 1</div>
  <div class="text2">Text 2</div>
</div>

Here is the codepen that you can check in both Chrome and Firefox.

And here is an image to show the difference:

As you can see, Chrome increases equally the height of rows 1 and 2 (row 3 stays 0). Firefox increases only the height of row2, i.e. the last visible row with content.

Note that I tried setting grid-template-rows as "minmax(0, auto) minmax(0, auto) 1fr", but then row 3 will have a weird height that makes the grid height bigger than its content.

Update: Ah! Was able to try it on a previous Chrome version (79) and I get the same result as in Firefox this time. So it seems 80 changed it. Can some people here confirm?

回答1:

You can update your code like below. It seems to work the same in Chrome 80 and firefox. Worth to note that 1fr is equal to minmax(auto, 1fr) which is indeed different from minmax(0,1fr) but still don't know exactly what makes both behave differently.

.grid {
  width:400px;
  display:grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto 1fr;
}

.image {
  width:40px;
  height:100px;
  grid-column:1;
  grid-row:1 / span 3;
  background-color: #f00;
}

.text1 {
  grid-column:2;
  grid-row:1;
}

.text2 {
  grid-column:2;
  grid-row:2;
}

<div class="grid">
  <div class="image"></div>
  <div class="text1">Text 1</div>
  <div class="text2">Text 2</div>
</div>

回答2:

The way you have mentioned the grid-template-rows for the container is invalid in chrome. I guess that's the issue

Try this css and see;

<style>
.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.image {
    height: 100px;
    grid-row: 1/4;
    background-color: #f00;
}

.text1 {
    grid-column: 2;
    grid-row: 1;
}

.text2 {
    grid-column: 2;
    grid-row: 2;
}
</style>

Hope that helps!!

来源：https://stackoverflow.com/questions/60079293/css-grid-behaviour-different-in-chrome-and-firefox

标签

css

google-chrome

firefox

css-grid

chromium