Question

我有一个包含两列的CSS网格。我可能会也可能不会在第一栏中显示内容。换句话说，div列将始终存在，只是有时它可能没有内容。当第一列中没有内容时，我不希望该列占用空间，而当内容中时，我希望其最大宽度为100px。是否可以仅通过CSS Grid定义来做到这一点？

#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>

Answer 2

您面临的问题不是SomeService someService = Mockito.mock(SomeService.class); MyDao underTest = new MyDao(someService);属性。认为只要使用该属性，就可以折叠空列。

问题是您有最大宽度限制。

有此要求，grid-template-columns和grid-template-columns不能自己完成工作，因为在grid-auto-columns规则中，参数默认为minmax()值。

replyr is mostly in "maintenance mode"

这意味着在您的布局中，定义如下：

max

...空列将始终为100px宽。

如果没有最大宽度限制，则可以使用隐式列（grid-template-columns: minmax(auto, 100px) auto）代替显式列隐藏空列（grid-auto-columns。

minmax() defaulting to max

如果您可以使用grid-template-columns属性的范围之外的方法，则可以使用以下解决方案：

grid-*-columns

.container {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 5px;
  height: 100px;
  background-color: #8cffa0;
  padding: 10px;
}

.container > div:first-child:not(:empty) {
  max-width: 100px;
}

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

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

2 个答案: