Having a hard time to make my header look like this, where left and right take the minimum width possible : What I have so far :
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
header div {
min-height: 7rem;
display: flex;
align-items: center;
padding: 2rem 5rem;
background-color: blue;
}
.center {
background-color: yellow;
}
.right {
background-color: red;
}
<header>
<div class="left">Left</div>
<div class="center">Center</div>
<div class="right">Right</div>
</header>