具有自适应宽度的网格状容器答案

【问题标题】：Grid-like container with adaptive width具有自适应宽度的网格状容器
【发布时间】：2023-03-18 10:13:02
【问题描述】：

我想要一个满足以下条件的容器：

它有 2 行和无限数量的列
其中的所有项目都是一个单词的文本元素，有自己的宽度
其中的所有项目都等宽，由最宽的元素（最长的单词）定义

我正在考虑使用弹性盒。由于所有项目都知道高度（因为它们是一行文本），我可以像这样定义可包装容器：

display: flex;
flex-flow: column wrap;
height: 100px;

同一列内的所有项目的宽度相等。但我希望所有项目都具有相同的宽度。我应该使用网格吗？如果是，怎么做？

【问题讨论】：

Equal height rows / width columns in CSS Grid.

标签： css flexbox css-grid

【解决方案1】：

你可以试试下面的 CSS 网格：

.grid {
  display: inline-grid;
  grid-template-rows: 1fr 1fr; /*two equal rows*/
  grid-auto-columns: 1fr; /*all columns will be equal*/
  grid-auto-flow: column;
}

span {
  outline: 1px solid;
  padding: 5px
}

<div class="grid">
  <span>some_text</span>
  <span>text_long</span>
  <span>text</span>
  <span>a</span>
  <span>text</span>
  <span>some_text</span>
  <span>some_looong_text</span>
  <span>some_text</span>
</div>

【讨论】：

非常感谢。我还有另一个问题。现在我想把这个网格放在另一个容器中，它应该只显示网格的前两列（正下方将有一个导航来更改翻译，这样你就可以看到其他列）。有可能吗？
@quigen 是的，这是可能的，您可以简单地使外部容器的宽度变小，这样您就可以隐藏溢出以仅显示网格的一部分，然后您可以考虑一些 JS翻译网格以显示您想要的列...我无法在评论部分详细说明此类内容，并且我不会编辑答案，因为它超出了问题范围，但请尝试这样做，如果您仍然遇到问题，您可以重新发布另一个问题。
是的，问题是我希望外部容器也很灵活，并且可以根据需要占用尽可能多的空间。我怎么能说它的最小宽度应该足够宽以包含上面网格的两列而不使用 javascript 并检查项目宽度？
@quigen 不知道是否可以不使用JS，顺便说一下你不需要检查项目宽度，你只需要从网格中获取列宽值（读取属性grid-template-columns) 因为所有的宽度都一样

【解决方案2】：

如果您希望所有项目具有相同的宽度，您需要在它们的类中定义它们的宽度。

.container{
display: flex
height: 100px
}

.container__item{
width: 20px
height: 100%:
}

根据您的喜好更改宽度。

【讨论】：