La necesidad es tener el ancho de columna .card-media establecido en 0 cuando esté vacío.
.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> En este caso, aunque vacía, la columna .card-media permanece con un ancho del 24%. Mismo resultado cuando se usa minmax(auto, 24%) . ¿Puedo establecer esa columna en 0 usando CSS Grid?
Este fragmento simplemente establece display: none si el elemento está vacío:
.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>En realidad estás buscando contenido adecuado ()
úsalo así:
grid-template-columns: fit-content(24%) 1fr; Y aplicar a .card-media
min-width: 0;para que no tenga ancho mínimo.