CSS Grid，自动填充 + 宽度由内容设置

Question

我希望每个按钮保留其独特的宽度（目前基于文本宽度），并在水平空间不足时自动放置到下一行。

使用grid-auto-flow: column可以使按钮保持宽度，但它们不会换行。使用grid-template-columns: repeat(auto-fill, minmax(1rem, 15rem))可以让它们换行，但是它们将失去它们的宽度。

Codesandbox：https://codesandbox.io/s/jovial-shannon-btp3x?file=/src/styles.css

.grid {
  margin-top: 1rem;
  margin-left: 0.1rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(1rem, 11.3rem));
  max-width: 100%;
  grid-row-gap: 2.5rem;
  grid-column-gap: 2.5rem;
}

.button {
  padding: 1rem;
  outline: 1px solid rgba(110, 110, 110, 0.34);
  color: white;
  background-color: #1d1f1f;
  font-family: Calibri;
  font-size: 1.4rem;
  font-weight: bold;
}

<div class="grid">
  <button class="button">
        <span class="button-text">
          ab
        </span>
      </button>
  <button class="button">
        <span class="button-text">
          abcd
        </span>
      </button>
  <button class="button">
        <span class="button-text">
          abcdefg
        </span>
      </button>
  <button class="button">
        <span class="button-text">
          abcdefghij
        </span>
      </button>
  <button class="button">
        <span class="button-text">
          abcdefghijklm
        </span>
      </button>
  <button class="button">
        <span class="button-text">
          abcdefghijklmnop
        </span>
      </button>
</div>

- Robert C

Answer 1

我希望每个按钮保留其独特的宽度（当前基于文本宽度），并且在水平空间不足时自动将按钮放置在下一行。 使用grid-template-columns: repeat(auto-fill, minmax(1rem, 15rem))可以使它们换行，但是它们会失去各自的宽度。 好吧，按钮包含在列中。像行一样，列在网格容器中具有固定的长度。 看起来你实际上要求的是灵活的列长度，以适应其单元格的不同宽度。那不是一个网格，因此，在网格布局中不可能实现。 这里是我所说的内容的说明： 网格是交错的固定宽度列和固定高度行的矩阵。您可以调整按钮在其轨道内的宽度，但这只会导致它们之间出现难看的间隙。

使用grid-auto-flow: column允许按钮保留其宽度，但是它们不会换行。 是的，因为使用grid-auto-flow: column（没有定义的行）时，所有按钮都存在于单个行中，并且具有自己的列。

考虑到你的第二点，如果没有auto-fill或auto-fit，它们没有理由换行，即使它们可以换行，您也会遇到前面部分描述的相同问题。

考虑flexbox，它不受列和行轨道的限制。虽然您需要通过hack的方式来获得间距，因为使用flex时，gap属性目前仅在Firefox中支持。

.grid {
  display: flex;
  flex-wrap: wrap;
  row-gap: 2.5rem;     /* FF only */
  column-gap: 2.5rem;  /* FF only */
}

.button {
  max-width: 11.3rem;
  min-width: 1rem;
  padding: 1rem;
  outline: 1px solid rgba(110, 110, 110, 0.34);
  color: white;
  background-color: #1d1f1f;
  font-family: Calibri;
  font-size: 1.4rem;
  font-weight: bold;
}

<div class="grid">
  <button class="button">
    <span class="button-text">
      ab
    </span>
  </button>
  <button class="button">
    <span class="button-text">
      abcd
    </span>
  </button>
  <button class="button">
    <span class="button-text">
      abcdefg
    </span>
  </button>
  <button class="button">
    <span class="button-text">
      abcdefghij
    </span>
  </button>
  <button class="button">
    <span class="button-text">
      abcdefghijklm
    </span>
  </button>
  <button class="button">
    <span class="button-text">
      abcdefghijklmnop
    </span>
  </button>
</div>

jsFiddle演示

- Michael Benjamin

---

你的引用：“那不会是一个网格，因此，在网格布局中不可能。”非常偏离新CSS Grid规范对“网格”的定义。新规范并不是关于制作相同宽度的列和相同高度的行；如果是这样的话，我们就不能使用'max-content'和'min-content'等值参数。我们将无法在同一网格中将百分比、rem、em、像素和其他可变宽度混合到不同的列中。这个网站会很有帮助。 - weo3dev

Answer 2

你要找的是“grid-auto-flow”，它可以设置为列或行。如果需要快速的视觉参考，MDN 的页面是一个不错的选择。

CSS Grid 是一种布局工具，就像我们在互联网出现之前用于印刷材料的工具一样。列不需要是相同的宽度，而行也不需要是相同的高度。事实上，CSS Grid 就是我们希望在二十年前拥有的布局工具，因为在一个严格的“每列都是相同宽度”的基础上布置东西变得单调乏味。

此外，CSS Grid 还允许重叠、无需媒体查询的布局调整和自动放置等功能，我还可以继续列举。

额外提示：查找 grid 区域。在这里阅读相关内容。

- weo3dev