CSS Grid minmax(0,25%) won't set width to 0

Question

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>

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?

whygee · Answer 1 · 2021-12-06T21:39:36.280

1

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

edited Dec 06 '21 at 21:39

answered Dec 06 '21 at 08:40

whygee

1,783
6
12

Thank you. However this solution does not preserve the max width of 24% that .card-media has – MadeInLagny Dec 06 '21 at 13:31
updated answer. fit-content is the function you need instead of minmax. – whygee Dec 06 '21 at 21:40

score 1 · Answer 2 · answered Dec 06 '21 at 08:58

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>

CSS Grid minmax(0,25%) won't set width to 0

2 Answers2