CSS 网格自动列不会破坏文本

Question

TL;DR：我已经使用开发工具实现了所需的样式，但没有立即将其转移到代码中，现在我无法弄清楚为什么它不起作用。

我正在尝试实现以下样式，红色块是我为了在此处发布而屏蔽的图像。重要的是，左侧的标题和右侧的文本块具有相同的大小（基本上是标题的最小宽度），并且图像占据其余的宽度。

我很感激任何将我推向正确方向的帮助，提前致谢！

我的期望：

我已经使用 grid-template-columns: auto 1fr auto 实现了它，正如您在上面的屏幕截图中看到的那样，它正在工作，但正如 tldr 中提到的，我的笨蛋忘记将 devtools 更改转移到代码中......

一旦我尝试将网格模板列设置为“auto 1fr auto”并相应地调整文本和图像的网格列开始，我就会得到以下结果：

如您所见，图像完全消失，文本不再换行以适应与标题相同的宽度，我一生都无法弄清楚为什么......

编辑： 这是一个小沙箱，基本上显示了我遇到的问题，我试图使其尽可能小，但仍然尽可能显示问题： https://codesandbox.io/p/sandbox/happy-sanderson-2qlrs7

编辑2： 我刚刚意识到，在我预期的屏幕截图中，标题和文本块之间的宽度不一样，但非常相似。现在我的下一个问题：有没有办法让它们具有相同的宽度，或者我应该使用 JS 设置它们？

Answer 1

没有可用的 CSS 声明来设置网格列的宽度以匹配另一个指定列的宽度。对于第 1 列，

max-content

将为您提供所需的宽度，但无法说第 3 列应与第 1 列的宽度匹配。您无法使用网格或 Flexbox 以声明方式创建此设计。

所以你需要用 Javascript 来完成，我会使用 Flexbox 而不是网格来让事情变得简单。

1. 在文档中的其他位置创建一个隐藏元素，其中包含与第一列相同的文本。
2. 测量该元素的宽度。
3. 将第一列和最后一列的宽度设置为该测量值。

演示片段：

const titleWidth = document.getElementById('measure-this').offsetWidth
document.getElementById('width-is').innerHTML = titleWidth + 'px'
document.querySelector('.d2>div:first-child').style.width = titleWidth + 'px'
document.querySelector('.d2>div:last-child').style.width = titleWidth + 'px'

.d1 {
  margin-bottom: 2em;
  border: 3px dashed red;
  padding: 1em;
  opacity: 0.4;
}

.d2 {
  display: flex;
  gap: 5px;
}

.d2>* {
  background: silver;
}

.d2>*:nth-child(2) {
  flex: 1;
  text-align: center;
}

#measure-this {
  background: pink;
}

.title {
  font-size: 1.6em;
  font-weight: bold;
  color: blue;
  text-transform: uppercase;
}

<div class="d1">
  <span id="measure-this" class="title">über mich</span> is <span id="width-is"></span> wide.
</div>

<div class="d2">
  <div class="title">über mich</div>
  <div>centre column</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam. Cras sit amet pharetra ante. Sed quis commodo quam, vel facilisis ipsum. Vestibulum sodales iaculis arcu, et fringilla nisi ullamcorper sed. Donec interdum sit amet est non accumsan. Donec non augue feugiat, fermentum nunc non, convallis est.</div>
</div>