CSS 中具有灵活宽度的选项网格

Question

所以，我似乎找不到一个好的方法来做到这一点，谷歌也没有多大帮助。基本上，我有一个带有 LI 的 UL，这些 LI 都包含带有标签的复选框，每个标签可以是任意长度，我想以类似表格但流动的方式呈现它，因此当容器宽度发生变化时，“网格” " 或项目表被重排以保持网格状外观。这是我希望能解释的图片：

看看第一部分中“小”的空间如何变大，因为“长选项”不适合，然后它确实适合，“选项”的空间增长到与“更长的选项”相同的大小以适应新的表格/网格。当一切都合适时，它们都会得到最小尺寸

因此，仅使用 flex 这些不会对齐。我不确定“display: grid”是否可以做到这一点。有任何想法吗？

Answer 1

在我看来，在网格系统中单独使用 CSS 是不可能的。但正如您已经正确使用 Flexbox 系统一样。

为什么它不能与网格一起使用？

您可以按列和行对齐网格系统。理论上，您想要做的事情仅适用于行对齐。绝对不是用列模板。因为列会影响下面行的宽度。

因为您需要灵活的 divbox 长度来适应整个列的不同宽度，所以网格系统无法实现这一点。现在您可以说，嘿，那么我将在行级别执行此操作。是的，但是那样你就无法休息了。因此，用flexbox系统做你想做的事情是正确的。

Answer 2

（这花了两个小时哈哈，真的希望它能成功）

这是我主要用于帮助格式化代码的来源。

尝试;

function opt() {
  document.getElementById("1").style.color = "#B1B1B1";
}

function sml() {
  document.getElementById("2").style.color = "#B1B1B1";
}

function lng() {
  document.getElementById("3").style.color = "#B1B1B1";
}

function vlng() {
  document.getElementById("4").style.color = "#B1B1B1";
}

function reset() {
  document.getElementById("1").style.color = "#000";
  document.getElementById("2").style.color = "#000";
  document.getElementById("3").style.color = "#000";
  document.getElementById("4").style.color = "#000";
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

.grid-container>div {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid black;
  text-align: center;
  padding: 12px;
}

.button-div {
  text-align: center;
}

.button-div button {
  font-size: 21px;
}

<div class="grid-container">
  <div id="1" onclick="opt()">Option</div>
  <div id="2" onclick="sml()">Small</div>
  <div id="3" onclick="lng()">Long Option</div>
  <div id="4" onclick="vlng()">Even Longer Option</div>
</div>
<br>
<br>
<div class="button-div">
  <button onclick="reset()">Reset</button>
</div>