嵌套的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>