CSS 网格，其中一列缩小以适应内容，另一列填充剩余空间

Question

我需要创建一个水平布局，其中一个块占用所有可用空间，其他块缩小以适应其内容。

例如：

<div class="grid">
    <div class="expand">Long text label</div>
    <div class="shrink">Button</div>
</div>

一个更复杂的两行示例（一个实际的网格）：

<div class="grid">
    <div class="row">
        <div class="shrink">...</div>
        <div class="expand">...</div>
        <div class="shrink">...</div>
        <div class="shrink">...</div>
    </div>
    <div class="row">
        <div class="shrink">...</div>
        <div class="expand">...</div>
        <div class="shrink">...</div>
        <div class="shrink">...</div>
    </div>
</div>

我的要求：

1. 即使很短，大块也应该填满所有可用空间
2. 小块应适合其内容
3. 大块（通常是文本标签）可能是一个大于可用空间的单词，因此在这种情况下应将其截断
4. 如果是多字，大块不应换行
5. 小块不应环绕（尽管在多个按钮或图标的情况下，这可以通过每个组件制作一个块来解决）
6. 支持多行（即列应对齐）

我的目标是 Android 和 iOS 智能手机。

我已尝试调整 this answer 中的代码，但无法使其适用于多行。此外，源代码必须是乱序的，这很令人困惑（尽管对我的用例来说并没有阻塞）。这是一个 jsfiddle：http://jsfiddle.net/k3W8L/

Answer 1

您需要使用grid-template-column 并将要缩小以适应的列的大小设置为auto，并使用fr 单位指定至少一个其他列的大小。

示例： 要重新创建侧边栏可折叠的侧边栏内容布局，

-------------------------------
| Sidebar |       Content     |
-------------------------------

您可以将网格创建为：

.grid {
  display: grid;
  ...
  grid-template-columns: auto minmax(0, 1fr); // see note below
  grid-template-areas: "sidebar content";
}
.sidebar {
  grid-area: sidebar;
}
.content {
  grid-area: content;
}

在此处查看 codepen 以获取演示和代码：https://codepen.io/khs/pen/vegPBL 您可以点击导航栏来查看自动调整大小。

---

注意：写完这个答案后我学到的一件事是，在大多数情况下，尤其是在固定高度/固定宽度的布局中，您应该使用 minmax(0, 1fr) 而不是 @ 987654329@。原因是1fr实际上是minmax(auto, 1fr)的简写。当用于具有较长内容的固定布局时，这会中断。有关详细信息，请参阅此问题：Why does minmax(0, 1fr) work for long elements while 1fr doesn't? 因此，我更新了我的答案以反映事实。 minmax 可能有点冗长，但它几乎总是你想要的这种布局。

---

上下文：我最近在学习在我的应用中使用网格时遇到了这个问题。在 ilyaigpetrov 的回答的帮助下，我能够得到一个缩小以适应列大小的工作。他们的回答并没有给出太多解释，所以我想我会添加这个：

Answer 2

我不知道我的代码是否有效，但它可以完成工作：无论是使用网格还是使用 flex。

.container {
  display: grid;
  grid-template-columns: 1fr auto auto;
}
.one {
  background-color: pink;
}
.two {
  background-color: yellow;
}
.three {
  background-color: lightgreen;
}


/* Now the same but with flex. */
.whole-row {
  grid-column: 1 / -1;
}
.flexy {
  display: flex;
  border: 1px solid red;
}
.flexy > .one {
  flex-grow: 1;
}
.flexy > .two,
.flexy > .three {
  /* flex-grow: 0; <- This value is a default. */
}

<div class="container">

  <div class="one">one</div>
  <div class="two">two</div>
  <div class="three">three</div>

  <div class="one">one</div>
  <div class="two">two</div>
  <div class="three">three</div>

  <div class="whole-row flexy">
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
  </div>

</div>

Answer 3

我在尝试创建一个简洁的示例时找到了自己问题的答案。

它利用表格布局：

.grid {
    display: table;
    table-layout: auto;
    width: 100%;
}
.row {
    display: table-row;
}
.expand {
    display: table-cell;
    width: 100%;
    max-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shrink {
    display: table-cell;
    white-space: nowrap;
}

.expand 中的 width: 100% 使块填充所有可用空间，从而满足前两个要求。

注意.grid中的width只是设置了整个网格的宽度，你可以在这里使用任何值。

出于某种原因，将max-width: 0 放入.expand 可以防止块增长超过可用空间，像100px 这样的小值也可以。我偶然发现了这一点，但我不知道它为什么会起作用。

这是 jsfiddle：http://jsfiddle.net/fr253/

This answer 帮助我入门。