使用CSS网格的等宽侧栏列

可以让左列和右列具有相同的宽度，而中间的列占用剩余空间吗？我不想像grid-template-columns: 20% 60% 20%那样设置百分比，因为这些列的内容并不总是确定的。

Flexbox和Tables似乎没有解决此问题的方法，所以我再次尝试使用网格分数，但没有成功。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.grid {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr auto 1fr;
}

.col-1 {
    background-color: #FFCCCC;
    white-space: nowrap;
}

.col-2 {
    background-color: #CCFFCC;
}

.col-3 {
    background-color: #CCCCFF;
    white-space: nowrap;
}

<div class="grid">
    <div class="col col-1">This is column one</div>
    <div class="col col-2">Morbi semper accumsan odio, a interdum nisl dapibus eget. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque placerat urna ut finibus mollis. Morbi risus odio, pulvinar non rutrum nec, lacinia sit amet diam. Sed vitae imperdiet felis, sed gravida tortor. Maecenas a nisl ac leo finibus sollicitudin. Vestibulum non scelerisque odio, vehicula aliquam tortor.</div>
    <div class="col col-3">Column 3</div>
</div>

---

解决方案

这里有一个古怪的想法，其中的诀窍是拥有一个有两列的网格，并采用容器宽度的一半。然后，您将左右两列放在彼此上方以确保它们相等，并对平移使用一些魔术来纠正重叠并获得您想要的内容。

唯一的缺点是我们需要知道主容器的宽度。

查看下面全屏显示的完美效果，因为我使用的100vw包括滚动宽度。

数据-lang="js"数据-隐藏="真"数据-控制台="真"数据-巴贝尔="假">

.grid {
  display: grid;
  width:50%;
  grid-gap: 20px;
  grid-template-columns: auto minmax(0,1fr);
  margin:10px 0;
}

.col-1,
.col-3{
  background-color: #FFCCCC;
  white-space: nowrap;
  grid-column:1;
  grid-row:1;
}

.col-2 {
  background-color: #CCFFCC;
  width:200%;
}

.col-3 {
  background-color: #CCCCFF;
  transform:translateX(calc(100vw - 100%));
}

body {
  margin:0;
}

<div class="grid">
  <div class="col col-1">This is column one</div>
  <div class="col col-2">Morbi semper accumsan odio, a interdum nisl dapibus eget. Orci varius natoque penatibus et magnis </div>
  <div class="col col-3">Column 3</div>
</div>

<div class="grid">
  <div class="col col-1">This is column one</div>
  <div class="col col-2">Morbi semper </div>
  <div class="col col-3">Column 3</div>
</div>

<div class="grid">
  <div class="col col-1">This is column one too long</div>
  <div class="col col-2">Morbi semper </div>
  <div class="col col-3">Column 3</div>
</div>

<div class="grid">
  <div class="col col-1">This is column one too long</div>
  <div class="col col-2">Morbi semper accumsan odio, a interdum nisl dapibus eget. Orci varius natoque penatibus et magnis </div>
  <div class="col col-3">Column 3</div>
</div>

<div class="grid">
  <div class="col col-1">..</div>
  <div class="col col-2">Morbi semper accumsan odio, a interdum nisl dapibus eget. Orci varius natoque penatibus et magnis </div>
  <div class="col col-3">Column 3</div>
</div>

<div class="grid">
  <div class="col col-1">..</div>
  <div class="col col-2">Morbi  </div>
  <div class="col col-3">Column 3</div>
</div>

以下是了解该技巧的分步插图：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.grid {
  display: grid;
  width:50%;
  grid-gap: 20px;
  grid-template-columns: auto minmax(0,1fr);
  margin:10px 0;
}

.col-1,
.col-3{
  background-color: #FFCCCC;
  white-space: nowrap;
  grid-column:1;
  grid-row:1;
}

.col-2 {
  background-color: #CCFFCC;
}

.col-3 {
  background-color: #CCCCFF;
  opacity:0.8;
}

body {
  margin:0;
}

<div class="grid">
  <div class="col col-1">This is column one</div>
  <div class="col col-2">Morbi semper accumsan odio, a interdum nisl</div>
  <div class="col col-3">Column 3</div>
</div>

<div class="grid">
  <div class="col col-1">This is column one</div>
  <div class="col col-2" >Morbi semper accumsan odio, a interdum nisl </div>
  <div class="col col-3" style="transform:translateX(calc(100vw - 100%));">Column 3</div>
</div>

<div class="grid">
  <div class="col col-1">This is column one</div>
  <div class="col col-2" style="width:200%;">Morbi semper accumsan odio, a interdum nisls </div>
  <div class="col col-3" style="transform:translateX(calc(100vw - 100%));">Column 3</div>
</div>