为什么 auto on grid-template-columns 使多个元素具有相同的宽度？

Question

我想做什么
项目列表（不是 ul/ol 类型的列表）位于页面的中央，这些项目有 2 列。第一列应该有一个“固定”宽度（在这种情况下是

1em

），第二列应该和它的标题一样宽（我试着用

auto

来做到这一点）。

问题
所有项目的宽度都与最长的项目相同。在下面的示例中，我给

.item

和

.something-else

项添加了边框以使其更直观。

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-size: 32px;
}

.wrapper {
  display: grid;
  gap: 0.25rem;
  place-content: center;
  min-height: 100vh;
  padding: 2rem; 
}

.item {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1em auto;
  align-items: center;
  gap: 0.5em;
  border: 2px solid red;
}

.something-else {
  border: 1px solid blue;
} 

<div class="wrapper">
    <div class="item">
      <div class="something">1</div>
      <div class="something-else">Some title</div>
    </div>
    <div class="item">
      <div class="something">2</div>
      <div class="something-else">This is a longer title</div>
    </div>
    <div class="item">
      <div class="something">3</div>
      <div class="something-else">Another one</div>
    </div>
</div>

我试过的

• 对

  .item

  元素使用flex。这确实使

  .something-else

  做我想做的事，但所有

  .item

  元素仍然是相同的宽度（See here for the fiddle）
• 尝试使用内联网格
• 也在

  .wrapper

  上使用 flex/inline-flex
• 在所有物品周围添加一个带有

  flexbox

  的容器

我觉得通常我很容易做这些事情，尽管我可能真的不知道发生了什么。这次没有运气。

如果有人能解释为什么这不起作用，并且如果他们有答案也有一些解释，我们将不胜感激。

我同意使用

flexbox

的解决方案，但更喜欢

grid

（我想更好地理解它）。

Answer 1

使用

margin-right: auto

或 justify-self: start 或容器上的

justify-items: start

禁用拉伸对齐：

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-size: 32px;
}

.wrapper {
  display: grid;
  gap: 0.25rem;
  place-content: center;
  min-height: 100vh;
  padding: 2rem; 
}

.item {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1em auto;
  align-items: center;
  gap: 0.5em;
  border: 2px solid red;
  margin-right: auto; /* ADDED */
  /* OR justify-self: start*/
}

.something-else {
  border: 1px solid blue;
}

<div class="wrapper">
    <div class="item">
      <div class="something">1</div>
      <div class="something-else">Some title</div>
    </div>
    <div class="item">
      <div class="something">2</div>
      <div class="something-else">This is a longer title</div>
    </div>
    <div class="item">
      <div class="something">3</div>
      <div class="something-else">Another one</div>
    </div>
</div>