Ma question est très simple, je veux savoir pourquoi l'élément .header déborde de sa grille lorsqu'il atteint la largeur de la fenêtre d'affichage de 1500 pixels.
Code :
* {
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>
Mon idée est de faire en sorte que la largeur de l'élément .header元素的宽度为1500像素。当空间不足时，.header soit de 1500 pixels. Lorsque l'espace est faible,
width: min(1500px, 90%)并在.header元素中删除max-width，成功实现了这个效果，但我不知道具体发生了什么。我猜测网格轨道是根据内容的宽度来计算其宽度的。目前我不太确定1frJ'ai réussi à obtenir cet effet en définissant width: min(1500px, 90%) et en supprimant max-width dans l'élément
1fr. Tout le monde dit que Grid est génial, mais j'ai toujours des ennuis lorsque je quitte la chaleur de Flexbox. 🎜
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Utiliser
90vw而不是90%semble fonctionner pour cela*{ 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>