CSS Grid minmax (0,25%) не будет устанавливать ширину в 0

#javascript #html #css #css-grid #minmax

#javascript #HTML #css #css-grid #minmax

Вопрос:

Необходимо, чтобы ширина .card-media столбца была установлена на 0, когда она пуста.

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

В этом случае, хотя столбец и пуст, .card-media ширина столбца остается равной 24%. Тот же результат при использовании minmax(auto, 24%) .
Могу ли я установить для этого столбца значение 0 с помощью CSS Grid?

Ответ №1:

Этот фрагмент просто устанавливает display: none, если элемент пуст:

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

Ответ №2:

На самом деле вы ищете fit-content()

используйте это так:

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

И применяется к .card-media

 min-width: 0;

чтобы она не имела минимальной ширины.

JSFiddle