具有 CSS Grid 的等宽侧边栏列

Question

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

Flexbox 和表格似乎没有解决这个问题的方法，所以我再次尝试使用网格分数，但没有任何运气。

.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>

Answer 1

这是一个 hacky 的想法，其中诀窍是拥有一个包含两列的网格并占据容器宽度的一半。然后，您将左右两列放在彼此上方以确保它们相等，并通过翻译进行一些魔术以纠正重叠并得到您想要的。

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

由于我使用的是包含滚动宽度的100vw，因此请在全屏上检查以下内容以获得完美结果。

.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>

这里有一个分步说明来理解这个技巧：

.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>