html - 如何使我的页眉布局像这样？

Question

很难让我的页眉看起来像这样，其中左侧和右侧采用可能的最小宽度: 到目前为止我所拥有的:

*,
*::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>

Answer 1

对网格布局使用 1fr 1fr 1fr 意味着每个元素都采用相同的宽度 - 它们之间共享可用宽度。

如果您希望左侧和右侧占据包含它们所需的最小宽度，则将它们设置为 auto，将中间的设置为 1fr。中间的那个将占据所有剩余的宽度。

*,
*::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>

了解更多信息:

• A Complete Guide to Grid
• An Introduction to the `fr` CSS unit