我的問題非常簡單，我想知道為什麼.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>