CSS 网格、自动填充 + 按内容设置宽度

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>

Answer 1

我希望每个按钮保留其独特的宽度（当前基于文本宽度），并且当水平方向没有更多空间时，按钮会自动放置在下一行中。

使用 grid-template-columns: repeat(auto-fill, minmax(1rem, 15rem))允许它们换行，但随后它们会失去各自的宽度。

嗯，按钮包含在列中。列（如行）在网格容器中具有固定的长度。

看来您真正要求的是灵活的列长度，可以调整以适应单元格的不同宽度。这不是网格，因此在网格布局中是不可能的。

这是我所说的一个例子：

网格是由相交的固定宽度列和固定高度行组成的矩阵。您可以调整按钮轨道内的宽度，但这只会导致按钮之间出现难看的间隙。

使用grid-auto-flow: column允许按钮保留其宽度，但随后它们不会换行。

是的，因为有grid-auto-flow: column（并且没有定义行），所有按钮都存在于一行中并具有自己的列。

对于第二点，它们没有理由在没有auto-fillor 的情况下换行auto-fit，即使可以，您也会遇到上一节中描述的相同问题。

考虑一下 Flexbox，它不受列轨道和行轨道的限制。尽管您需要想办法解决这个问题，因为gap目前只有 Firefox 支持 flex 属性。

.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 演示