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

Question

我正在尝试使用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> 

我想知道我做错了什么，或者是浏览器的错误。

• Firefox版本：58.0（64位）
• Chrome版本：版本64.0.3282.119（官方版本）（64位）

Answer 1

这似乎是Firefox中的一个错误。 但我不确定。

这是明确的：

1. 你有嵌套网格容器的事实很重要。

   您的第二个演示版适用于Chrome和Firefox，只有一个网格容器。

   第一个仅适用于Chrome的演示版具有嵌套网格容器。 如果您消除了嵌套，并且只使用一个网格容器，则布局适用于两种浏览器。

   因此，作为一种可能的跨浏览器解决方案，最小化网格容器的嵌套。

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

   修订演示

 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> 

---

2. 在Firefox中， max-width上的固定值可防止盒子缩小以适应更小的屏幕尺寸。

   Firefox在缩小.main容器时遇到问题，其max-width为像素值。 Chrome没有。

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

   但是，此处描述的解决方案： 防止内容扩展网格项 ...在这种情况下不起作用。

   （可能是因为网格项中没有内容且没有定义的宽度。定义的唯一宽度位于网格列上，在网格容器上设置。因此，仅适用于网格项的解决方案可能甚至不适用。）

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

   修改后的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>