两列相等的宽度（其中宽度由最长的一列设置，而第三列填充剩余的空间

Question

我想制作这样的布局，如果可能的话，使用CSS Grid，但开放其他可能性：

[基本上，我希望有一个包含3个元素（输入，btn1，btn2）的容器.grid。首先，btn1和btn2的宽度应该相同，并且由哪个元素需要更多空间（即更长的内容）来确定。之后，剩余的元素（输入）应使用剩余的所有内容。我想出了这个代码段，但可以肯定它无法正常工作。

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

<div class="grid">
  <input />
  <button>Foo</button>
  <button>Bar Bar Bar</button>
</div>

仅使用CSS实现此目的的好方法是什么？

Answer 1

这里是一个hack（是一个hack！），它依赖于您知道容器宽度的事实。

下面，我将考虑一个整页容器（使用100vw定义的宽度]

.grid {
  display: grid;
  margin:50px 5px;
  grid-template-columns:1fr auto;
}
/* they will overlap so the longest one will define the size of auto*/
button {
  grid-column:2;
  grid-row:1;
}

/* we translate the first one to disable the overlap*/
button:first-of-type {
  transform:translateX(-100%);
}

input {
  /* 100vw - 10px = width of the grid container 
     100% is the width of the 1fr
     ((100vw - 10px) - 100%) will be the width of the buttons
  */
  width:calc(100% - ((100vw - 10px) - 100%));
  box-sizing:border-box;
}

body {
 margin:0;
}

<div class="grid">
  <input >
  <button>Foo</button>
  <button>Bar Bar Bar</button>
</div>

Answer 2

对按钮使用嵌套的网格容器。

.grid {
  display: grid;
  grid-template-columns: 1fr auto; /* see note 1 */
}

.button-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* see note 2 */
}

<div class="grid">
  <input />
  <div class="button-container">
    <button>Foo</button>
    <button>Bar Bar Bar</button>
  </div>
</div>
<br>
<div class="grid">
  <input />
  <div class="button-container">
    <button>Foo</button>
    <button>Bar Bar Bar Bar Bar Bar</button>
  </div>
</div>
<br>
<div class="grid">
  <input />
  <div class="button-container">
    <button>Foo</button>
    <button>Bar Bar Bar Bar Bar Bar Bar Bar Bar</button>
  </div>
</div>

注意：

1. [1fr在第一列上会消耗所有可用的水平空间，将第二列尽可能固定在右边。

2. [1fr 1fr在嵌套列上导致子容器中的水平空间被均等地划分，而不考虑内容宽度。