html - 两个等宽的列(宽度由最长的列设置)，第三列填充剩余空间

Question

我想制作这样的布局，如果可能，使用 CSS Grid 但对其他可能性持开放态度:



基本上，我想要一个容器 .grid包含 3 个元素(输入、btn1、btn2)。首先， 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>