The need is to have the .card-media column width set to 0 when empty.

.card {
  display: grid;
  grid-template-columns: minmax(0, 24%) 1fr;
  grid-template-rows: auto 1fr auto;
  grid-auto-flow: row;
  grid-template-areas: 'card-media card-title' 'card-media card-content' 'card-action card-action';
  padding: 1rem;
  width: 100%;
}

.card-media {
  grid-area: card-media;
  margin-right: 2%;
  float: left
}

<div class="card">
  <div class="card-media"></div>
  <div class="card-content">
    <div class="card-title">Title</div>
    <div class="card-text">
      <p>Content</p>
    </div>
    <div class="card-action">
      <button class="btn">Some action</button>
    </div>
  </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

In this case, although empty, the .card-media column remain at 24% width. Same result when using minmax(auto, 24%). Can I set that column to 0 using CSS Grid?

CodePudding user response：

This snippet simply sets display: none if the element is empty:

.card {
  display: grid;
  grid-template-columns: minmax(0, 24%) 1fr;
  grid-template-rows: auto 1fr auto;
  grid-auto-flow: row;
  grid-template-areas: 'card-media card-title' 'card-media card-content' 'card-action card-action';
  padding: 1rem;
  width: 100%;
}

.card-media {
  grid-area: card-media;
  margin-right: 2%;
  float: left;
}

.card-media:empty {
  display: none;
}

<div class="card">
  <div class="card-media"></div>
  <div class="card-content">
    <div class="card-title">Title</div>
    <div class="card-text">
      <p>Content</p>
    </div>
    <div class="card-action">
      <button class="btn">Some action</button>
    </div>
  </div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You are actually looking for fit-content()

use it like this:

grid-template-columns: fit-content(24%) 1fr;

And apply to .card-media

min-width: 0;

to make it have no minimum width.

JSFiddle