是否可以通过 grid-template-columns 定义隐藏具有空内容的列？

Question

我有一个包含两列的 CSS 网格。

我可能会也可能不会在第一列内呈现内容。换句话说，列 div 将始终存在，只是有时其中可能没有内容。

当第一列中没有内容时，我不希望该列占用空间，当有内容时，我希望它的最大宽度为100px。

是否可以单独通过 CSS 网格定义来做到这一点？

#container {
  display: grid;
  grid-template-columns: minmax(auto, 100px) auto;
  grid-gap: 5px;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #c0c0c0;
}

<div id="container">
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
  <div>
     Placeat, rerum illo eligendi, hic eum magnam quo architecto necessitatibus sunt sequi repellendus suscipit fuga tenetur atque corrupti modi saepe! Iusto, provident.
  </div>
</div>

Answer 1

使用grid-template-columns: fit-content(100px)（参见https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content）和绝对长度，列宽度适合其内容（没有最小值），并限制为最大宽度（在本例中为 100px）。

#container {
  display: grid;
  grid-template-columns: fit-content(100px) auto;
  grid-gap: 5px;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #c0c0c0;
}

<div id="container">
  <div>Lorem</div>
  <div>
     Placeat, rerum illo eligendi, hic eum magnam quo architecto necessitatibus sunt sequi repellendus suscipit fuga tenetur atque corrupti modi saepe! Iusto, provident.
  </div>
</div>