嵌套CSS网格布局在Chrome和Firefox中的不同行为 [英] Nested CSS grid layout different behavior in Chrome and Firefox

问题描述

我正在尝试使用CSS网格布局来模拟某些响应行为，尤其是:

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

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

我的示例 https://codepen.io/elgs/pen/goNxeL 效果很好在Chrome中，但是，它似乎在Firefox中不起作用.在水平调整浏览器大小时会找到它.

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.

另一个示例 https://codepen.io/elgs/pen/YYoxOq 效果很好在Chrome和Firefox中都是如此.

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版本:58.0(64位)
• Chrome版本:64.0.3282.119版(正式内部版本)(64位)

推荐答案

此似乎是Firefox中的错误.但是我不确定.

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

这很清楚:

1. 您嵌套了网格容器这一事实很重要.

您的第二个演示(可在Chrome和Firefox中使用)只有一个网格容器.

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

仅在Chrome中运行的第一个演示具有嵌套的网格容器.如果您消除了这种嵌套，并且仅使用一个网格容器，则该布局将在两种浏览器中均有效.

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.

在此修订的演示中，我在body和.content元素上注释了display: grid.剩下的唯一网格容器位于红色框的父级.main上:

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:

修订版演示

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>

1. 在Firefox中，max-width上的固定值可防止框缩小以适应较小的屏幕尺寸.

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

Firefox在使用max-width上的像素值缩小.main容器时遇到问题. Chrome没有.

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

想到的典型解决方案是覆盖网格项目上的min-width: auto默认设置.这样可以防止项目缩小到其内容大小或定义的宽度之外.

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.)

作为一种可能的解决方法，如果必须保留嵌套的容器，则不要使用带有max-width的固定值，而应使用百分比值.可能对您有用.

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.

修订后的代码笔

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>

这篇关于嵌套CSS网格布局在Chrome和Firefox中的不同行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！