My question is very simple, I want to know why the .header element overflows its grid track when it reaches the viewport width of 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>
My idea is to make the width of the .header element 1500 pixels. When space is insufficient, .header should occupy 90% of its grid track.
I successfully achieved this effect by setting width: min(1500px, 90%) and deleting max-width in the .header element, But I don't know exactly what happened. I'm guessing the grid track calculates its width based on the width of its content. At the moment I'm not sure what the exact meaning of 1fr is.
Everyone says Grid is great, but I always run into trouble when I leave the warmth of Flexbox.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Using
90vwinstead of90%seems to work for this*{ 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>