Soalan saya sangat mudah, saya ingin tahu mengapa elemen .header melimpahi trek gridnya apabila ia mencapai lebar paparan 1500 piksel.
Kod:
* {
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>
Idea saya adalah untuk menjadikan lebar elemen .header元素的宽度为1500像素。当空间不足时，.header 1500 piksel. Apabila ruang rendah,
width: min(1500px, 90%)并在.header元素中删除max-width，成功实现了这个效果，但我不知道具体发生了什么。我猜测网格轨道是根据内容的宽度来计算其宽度的。目前我不太确定1frSaya berjaya mencapai kesan ini dengan menetapkan width: min(1500px, 90%) dan memadamkan max-width dalam elemen
1fr. Semua orang berkata Grid hebat, tetapi saya sentiasa menghadapi masalah apabila meninggalkan kehangatan Flexbox. 🎜
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Menggunakan
90vw而不是90%nampaknya berkesan untuk ini*{ 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>