我的問題非常簡單,我想知道為什麼.header
元素在達到1500像素的視窗寬度時會溢出其網格軌道。
程式碼:
* { box-sizing: border-box; padding: 0; margin: 0; } body { background: #6e28d9; color: white; } .container { display: grid; grid-template-areas: 'header'; grid-template-columns: 1fr; background-color: rgba(255, 255, 255, 0.2); } .header { display: flex; justify-content: space-between; grid-area: header; width: 1500px; max-width: 90%; margin: 0 auto; }
<body> <div class="container"> <div class="header"> <div class="header-start">header start</div> <div class="header-end">header end</div> </div> </div> </body>
我的想法是讓.header
元素的寬度為1500像素。當空間不足時,.header
應該佔據其網格軌道的90%。
我透過設定width: min(1500px, 90%)
並在.header
元素中刪除max-width
,成功實現了這個效果,但我不知道具體發生了什麼事。我猜測網格軌道是根據內容的寬度來計算其寬度的。目前我不太確定1fr
的確切意義是什麼。
每個人都說Grid很棒,但當我離開Flexbox的溫暖時,總是遇到麻煩。
P粉2384338622024-04-06 12:19:12
使用90vw
而不是90%
似乎對此起作用
*{ box-sizing: border-box; padding: 0; margin: 0; } body { background: #6e28d9; color: white; } .container{ display: grid; grid-template-areas: 'header'; grid-template-columns: 1fr; background-color: rgba(255, 255, 255, 0.2); } .header{ display: flex; justify-content: space-between; grid-area: header; width: 1500px; max-width: 90vw; margin: 0 auto; border: 1px solid red; /*Added just to visualize the exact width*/ }
<div class="container"> <div class="header"> <div class="header-start">header start</div> <div class="header-end">header end</div> </div> </div>