Nested CSS grid layout different behavior in Chrome and Firefox

Question

I'm trying to use CSS grid layout to simulate some responsive behavior, specifically with:

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

My example https://codepen.io/elgs/pen/goNxeL works well in Chrome, however, it doesn't seem to work in Firefox. You will find it when you resize the browser horizontally.

Another example https://codepen.io/elgs/pen/YYoxOq works well in both Chrome and Firefox.

html,body {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 100px 1fr 50px;
}
.header {
  grid-column: 1/2;
  grid-row: 1/2;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  background-color: #57324f;
}
.header .title {
  grid-column: 1/2;
  grid-row: 1/2;
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 1000px;
  color: aliceblue;
}
.footer {
  grid-column: 1/2;
  grid-row: 3/4;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  background-color: #57324f;
}
.footer .copyright {
  grid-column: 1/2;
  grid-row: 1/2;
  align-self: center;
  font-size: 12px;
  justify-self: center;
  width: 100%;
  max-width: 1000px;
  color: aliceblue;
}
.content {
  grid-column: 1/2;
  grid-row: 2/3;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 0;
  background-color: aliceblue;
}
.content .main {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 10px;
  grid-auto-flow: dense;
  justify-self: center;
  width: 100%;
  margin-top: 10px;
  max-width: 1000px;
}
.placeholder {
    height: 100px;
  position: relative;
  border: 1px solid red;
}

<div class="header">
    <div class="title">
        <h2>Header</h2>
    </div>
</div>
<div class="content">
    <div class="main">
        <div class="placeholder"></div>
        <div class="placeholder"></div>
        <div class="placeholder"></div>
        <div class="placeholder"></div>
        <div class="placeholder"></div>
        <div class="placeholder"></div>
    </div>
</div>
<div class="footer">
    <div class="copyright">
        <span>Footer</span>
    </div>
</div>

I'm wondering whether I have done anything wrong or it's the browser's bug.

Firefox version: 58.0 (64-bit)
Chrome version: Version 64.0.3282.119 (Official Build) (64-bit)

Michael Benjamin · Accepted Answer · 2018-01-25T16:38:43.273

This appears to be a bug in Firefox. But I'm not sure.

Here's what is clear:

The fact that you have nested grid containers matters.

Your second demo, which works in both Chrome and Firefox, has only one grid container.

The first demo, which only works in Chrome, has nested grid containers. If you eliminate that nesting, and use only one grid container, the layout works in both browsers.

So, as a possible cross-browser solution, minimize the nesting of grid containers.

In this revised demo, I've commented out display: grid on the body and .content elements. The only grid container left is on .main, the parent of the red boxes:

revised demo

html,
body {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

body {
  /* display: grid; */
  grid-template-columns: 1fr;
  grid-template-rows: 100px 1fr 50px;
}

.header {
  grid-column: 1/2;
  grid-row: 1/2;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  background-color: #57324f;
}

.header .title {
  grid-column: 1/2;
  grid-row: 1/2;
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 1000px;
  color: aliceblue;
}

.footer {
  grid-column: 1/2;
  grid-row: 3/4;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  background-color: #57324f;
}

.footer .copyright {
  grid-column: 1/2;
  grid-row: 1/2;
  align-self: center;
  font-size: 12px;
  justify-self: center;
  width: 100%;
  max-width: 1000px;
  color: aliceblue;
}

.content {
  grid-column: 1/2;
  grid-row: 2/3;
  /* display: grid; */
  grid-template-columns: 1fr;
  grid-template-rows: 0;
  background-color: aliceblue;
}

.content .main {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 10px;
  grid-auto-flow: dense;
  justify-self: center;
  width: 100%;
  margin-top: 10px;
  max-width: 1000px;
}

.placeholder {
    height: 100px;
  position: relative;
  border: 1px solid red;
}

<div class="header">
  <div class="title">
    <h2>Header</h2>
  </div>
</div>
<div class="content">
  <div class="main">
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
  </div>
</div>
<div class="footer">
  <div class="copyright">
    <span>Footer</span>
  </div>
</div>

In Firefox, a fixed value on max-width prevents the box from shrinking to accommodate smaller screen sizes.

Firefox has a problem shrinking the .main container with a pixel value on the max-width. Chrome does not.

A typical solution that comes to mind is to override the min-width: auto default setting on grid items. This prevents items from shrinking past the size of their content or their defined width.

However, that solution, described here: Prevent content from expanding grid items ... doesn't work in this case.

(Probably because there is no content in and no defined widths on the grid items. The only widths defined are on the grid columns, set on the grid container. So the solution, which applies only to grid items, probably doesn't even apply.)

As a possible workaround, if you must keep the nested containers, then instead of using a fixed value with max-width, use a percentage value. That may work for you.

revised codepen

body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 100px 1fr 50px;
  height: 100vh;
  margin: 0;
}

.header {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  background-color: #57324f;
}

.content {
  display: grid;
  grid-template-columns: 1fr;
  /* grid-template-rows: 0; */
  align-content: start;  /* new */
  background-color: aliceblue;
}

.content .main {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 100px;  /* new */
  grid-gap: 10px;
  grid-auto-flow: dense;
  justify-self: center;
  width: 100%;
  margin-top: 10px;
  /* max-width: 1000px; */
  max-width: 75%;  /* new */
}

.placeholder {
  border: 1px solid red;
}

.footer {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  background-color: #57324f;
}

.header .title,
.footer .copyright {
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 1000px;
  color: aliceblue;
}

.footer .copyright {
  font-size: 12px;
}

<div class="header">
  <div class="title">
    <h2>Header</h2>
  </div>
</div>
<div class="content">
  <div class="main">
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
  </div>
</div>
<div class="footer">
  <div class="copyright">
    <span>Footer</span>
  </div>
</div>

By changing `max-width` from a fixed value to a percentage, both Chrome and Firefox behave as expected. Thank you so much. Wondering This is Firefox expected behavior or whether they will fix it in future releases. — , Jan 25 '18 at 19:18
You're welcome. Like I mentioned at the outset, I'm not entirely sure about the status of this bug. It sure looks like one in Firefox. But Grid is brand new, so lots of things probably still need to be sorted out. — Michael Benjamin, Jan 25 '18 at 19:33
RE: Firefox buggy behavior - it could be [this bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1240834), which is more about deferred implementation of subgrids (aka lacking a feature more than containing a bug) — TylerH, Jan 25 '18 at 23:09
@TylerH, that bug report is about the subgrid feature ([which I've explored before](https://stackoverflow.com/q/47929369/3597276)). This question isn't calling any subgrids. It's just nesting grid containers, so I'm not sure they are related. But thanks anyway. — Michael Benjamin, Jan 25 '18 at 23:44
@Michael_B I see; I thought subgrids were simply a term for `display:grid` elements nested inside other `display:grid` elements. — TylerH, Jan 26 '18 at 01:34
@TylerH, sure sounds like that, but no. A nested grid container and a subgrid are not the same. A subgrid is an entirely separate feature, which hasn't yet been implemented by any browser. — Michael Benjamin, Jan 26 '18 at 01:36

Nested CSS grid layout different behavior in Chrome and Firefox

1 Answers1

Linked