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>

等宽边栏列与CSS网格

1 个答案: