列宽等于列中所有内容的最大内容的 Css 网格布局

Question

我有一定数量的 div，里面有文字。 div 的数量事先是未知的。我想在网格中排列文本，使每个列的宽度等于该列中所有文本的最大内容。

  <div class="container">
  <div class="item">Long text 01 </div>
  <div class="item">Item 2</div>
  <div class="item">Align with 1</div>
  <div class="item">Align with 1 </div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  </div>

对于这个给定的dom，我想满足以下要求。

1. 如果有足够的宽度并且所有项目都适合一行，则每列宽度应等于文本宽度。即如果可能的话更喜欢水平布局

2. 如果单行放不下所有的文字，并且有多行，每列的宽度等于该列所有文字的最大内容。

3. 列中的文本应开始相互对齐。

.container {
  display: grid;
  grid-gap: 10px; 
  grid-template-columns: repeat(auto-fill, minmax( max-content, 0px));
  grid-template-rows: repeat(auto-fill, 40px);
  width: 200px;
}

.item {
  border: 1px solid black;
  padding: 10px; 
}

我想出了这个 css 但它只满足 1.

你可以在这里看到 jsfiddle。

https://jsfiddle.net/kg23qxup/160/

我只成功地水平布置项目，列宽等于项目的最大内容。它溢出容器并且不创建第二行。

我肯定网格是解决此问题的正确且简单的方法，但我似乎无法弄清楚。

Answer 1

你应该给容器的

width:100%

。另外对于

grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

我在下面写了一个代码并且现在工作正常。我希望它对你有用。

.container {
  display: grid;
  grid-gap: 1em; /* add some gap between items */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  width:100%;
}

.item {
  background:white;
  border:1px solid black;
  padding: 10px 10px 10px 10px;
}

<div class="container">
  <div class="item">Long text 01 </div>
  <div class="item">Item 2</div>
  <div class="item">Align with 1</div>
  <div class="item">Align with 1 </div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
   <div class="item">Long text 01 </div>
  <div class="item">Item 2</div>
  <div class="item">Align with 1</div>
  <div class="item">Align with 1 </div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  </div>