'How to make my header layout be like this?

Having a hard time to make my header look like this, where left and right take the minimum width possible : enter image description hereWhat 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>
htmlcsscss-grid


Solution 1:[1]

Using 1fr 1fr 1fr for the grid layout means that each of the items takes the same width - they share available width between them.

If you want the left and right sides to take up the minimum width necessary to contain them then set those to auto and the middle one to 1fr. The middle one will then take up all the remaining width.

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  display: grid;
  grid-template-columns: auto 1fr auto;
}

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>

Learn more at:

Solution 2:[2]

Use flex-grow: 1.

This can be easily achieved using display: flex and flex-grow: 1.

Learn more about flexbox:

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  display: flex;
}

header div {
  min-height: 7rem;
  align-items: center;
  padding: 2rem 3rem;
  background-color: blue;
}

.center {
  background-color: yellow;
  flex-grow: 1;
}

.right {
  background-color: red;
}
<header>
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right">Right</div>
</header>

Solution 3:[3]

1fr 1fr 1fr create problem by giving same width so i have used auto 1fr auto by set auto it can change left right width on basis relatively with parent. or you can set values for left and right eg: 0.2fr 0.2fr

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  display: grid;
  grid-template-columns: auto 1fr auto;
}

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Chris Happy
Solution 2 Chris Happy
Solution 3 Ankit Pathak

Related Questions