Можно ли скрыть столбцы с пустым содержимым через определение grid-template-columns?

Question

У меня есть CSS-сетка с двумя столбцами. Я могу или не могу отображать содержимое в первом столбце. Другими словами, столбец div всегда будет присутствовать, просто иногда в нем может не быть содержимого. Когда в первом столбце нет содержимого, я не хочу, чтобы этот столбец занимал пространство, а когда есть содержимое, я хочу, чтобы его максимальная ширина составляла 100 пикселей. Можно ли сделать это только с помощью определения 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. Имеет смысл подумать, что, просто используя это свойство, вы сможете свернуть пустые столбцы.

Проблема в том, что у вас ограничение максимальной ширины.

С этим требованием grid-template-columns и grid-auto-columns не могут выполнять работу самостоятельно, потому что в правиле minmax() аргумент по умолчанию имеет значение max.

• minmax () по умолчанию max

Это означает, что в вашем макете, определенном так:

  grid-template-columns: minmax(auto, 100px) auto

… пустой столбец всегда будет шириной 100 пикселей.

Если у вас не было ограничения по максимальной ширине, вы можете скрыть пустые столбцы, используя неявные столбцы (grid-auto-columns) вместо явных столбцов (grid-template-columns ).

• Сетка CSS: как сделать ширину столбца полной, когда второго столбца нет?

Если вы можете работать за пределами 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;
}

<div class="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>

<hr>

<div class="container">
  <div></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

Использование 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>