html - 具有 CSS 网格的等宽侧边栏列

Question

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

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

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