CSS Grid 列与文本一样宽但有上限

Question

.grid{
  display: grid;
  grid-template-columns: minmax(auto, 200px) 1fr;
}

<div class="grid">
  <span>Thing 1</span>
  <span>Thing 2</span>
  <span>Thing 3</span>
  <span>Thing 4</span>
</div>

所以基本上我有一个两列布局。我希望第一列的宽度与其内容一样宽（自动），但也有一个上限（200 像素）。正如您在上面的示例中看到的那样，它似乎只是一直到 200 像素而不是自动。我也尝试了min-content，但它产生了相同的结果。我可以让第一列只和文本一样宽吗？

Answer 1

只保留auto 并在项目上使用max-width：

.grid{
  display: grid;
  grid-template-columns: auto 1fr;
}
span:nth-child(2n + 1) {
  max-width:200px;
}

<div class="grid">
  <span>Thing 1</span>
  <span>Thing 2</span>
  <span>Thing 3</span>
  <span>Thing 4</span>
</div>

<div class="grid">
  <span>Thing 1 1 1 1 1  1 1 1 1  1 1 1 1 1 1 1 1 1 1</span>
  <span>Thing 2</span>
  <span>Thing 3</span>
  <span>Thing 4</span>
</div>

或使用fit-content()

.grid{
  display: grid;
  grid-template-columns: fit-content(200px) 1fr;
}

<div class="grid">
  <span>Thing 1</span>
  <span>Thing 2</span>
  <span>Thing 3</span>
  <span>Thing 4</span>
</div>

<div class="grid">
  <span>Thing 1 1 1 1 1  1 1 1 1  1 1 1 1 1 1 1 1 1 1</span>
  <span>Thing 2</span>
  <span>Thing 3</span>
  <span>Thing 4</span>
</div>