代码之家 › 专栏 › 技术社区 › Qian Chen

Chrome和Firefox中嵌套CSS网格布局的不同行为

css-grid firefox google-chrome css html

Qian Chen · 技术社区 · 7 年前

我尝试使用CSS网格布局来模拟一些响应行为,特别是:

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

我的示例 https://codepen.io/elgs/pen/goNxeL 在Chrome中运行良好,但在Firefox中似乎不起作用。当水平调整浏览器大小时,您会发现它。

另一个例子 https://codepen.io/elgs/pen/YYoxOq 在Chrome和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>

我想知道是我做错了什么,还是浏览器的bug。

Firefox版本:58.0(64位)
Chrome版本:版本64.0.3282.119(官方版本)(64位)

1 回复 | 直到 7 年前

Michael Benjamin William Falcon 7 年前

这出现成为Firefox中的一个bug。但我不确定。

有一点很清楚:

有嵌套网格容器这一事实很重要。

你的 second demo ,它同时适用于Chrome和Firefox,只有一个网格容器。

这个 first demo ,它只在Chrome中工作,具有嵌套的网格容器。如果消除该嵌套,并且只使用一个网格容器,则布局在两种浏览器中都有效。

因此,作为一种可能的跨浏览器解决方案,尽量减少网格容器的嵌套。

在这个修改过的演示中,我已经注释掉了 display: grid 上 body 和 .content 元素。唯一剩下的网格容器已打开 .main ,红色框的父项:

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>

在Firefox中,上的固定值 max-width 防止盒子收缩以适应较小的屏幕尺寸。

Firefox在缩小 .主要的 上具有像素值的容器 最大宽度 . 铬则不然。

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

然而,此处描述的解决方案: Prevent content from expanding grid items ... 在这种情况下不起作用。

(可能是因为网格项中没有内容,也没有定义宽度。唯一定义的宽度是在网格列上,设置在网格容器上。因此,仅适用于网格项的解决方案可能根本不适用。)

作为一种可能的解决方法,如果必须保留嵌套的容器,则使用 最大宽度 ,使用百分比值。这可能对你有用。

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=“页眉”>
<div class=“title”>
<h2>标题(<)/h2>
</div>
</div>
<div class=“content”>
<div class=“main”>
<div class=“占位符”></div>
<div class=“占位符”></div>
<div class=“占位符”></div>
<div class=“占位符”></div>
<div class=“占位符”></div>
<div class=“占位符”></div>
</div>
</div>
<div class=“页脚”>
<div class=“版权所有”>
<跨度(>);页脚(<)/跨度(>);
</div>
</div>