Question:
Could you please explain why the .header element overflows its grid track when the viewport width reaches 1500px?
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;
}What I wanted:
I intended for the .header element to have a fixed width of 1500px, but switch to 90% of its grid track when the available room is insufficient.
What I tried:
Initially, I experimented with setting width: min(1500px, 90%) and removing max-width in the .header element. However, my understanding remains limited, as the behavior seems tied to how the grid track calculates its width based on content size. The significance of 1fr still eludes me.
Thoughts:
While many praise the advantages of Grid, I seem to encounter challenges whenever I venture beyond the familiar territory of Flexbox.