Is it possible to hide columns with empty content via the grid-template-columns definition?

Question

I have a CSS grid with two columns.

I may or may not render content inside the first column. In other words, the column div will always be present, it's just that sometimes it might not have content therein.

When there is no content in the first column I don't want that column to take up space, and when there is content I want it to have a max width of 100px.

Is it possible to do this via the CSS Grid definition alone?

#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

Using grid-template-columns: fit-content(100px) (see https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content) with an absolute length the column-width fits to its contents (with no minimum) clamped to a maximum width (of 100px in this case).

#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

The problem you're facing isn't the grid-template-columns property. It makes sense to think that, simply using that property, you would be able to collapse empty columns.

The problem is that you have a maximum width limitation.

With this requirement, grid-template-columns and grid-auto-columns can't do the job by themselves because in a minmax() rule, the argument defaults to the max value.

• minmax() defaulting to max

This means that in your layout, defined as such:

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

… the empty column will always be 100px wide.

If you didn't have a max-width limitation, you can hide empty columns by using implicit columns (grid-auto-columns), instead of explicit columns (grid-template-columns).

• CSS Grid: How to make a column span full width when a second column is not there?

In case you can work beyond the scope of grid-*-columns properties, here's a solution that may work for you:

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