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>

推荐答案

网格布局使用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>

Learn more at:

Html相关问答推荐

只有一行上有溢出的CSS网格

如何在css中将包含多行文本的多个p-tag放在一起(并排)?

如何使用html的<;输入>;处理/绑定Angular 信号?

根据按钮位置左/右对齐按钮

如何使用CSS创建文件夹选项卡的形状?

从网页中提取URL

我如何确保我的网格永远不会小于它的子网格

有没有办法移动占位符?

按钮悬停效果不影响按钮内的图标

如何在悬停时使矩形按钮上的边框变圆

并排放置两个 div,同时 div2 环绕 div1

Tailwind 网格行高度可防止拉伸到最高行的所有相同高度

Github上部署需要花费几小时时间:等待github pages部署批准

当我将有序列表居中时,数字会跑到列表的另一行

为什么
标签在 Edge 和 Firefox 中的编号会有两种不同的结果?

表格中每 4 行条纹一次

shinydashboard 标题中的位置标题

正确使用视频作为背景

我如何使用 HTML 和 CSS 在我的下拉菜单中获得这种类型的样式

所有幻灯片上的 Quarto RevealJS 标题