es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

CSS Grid minmax(0,25%) no establecerá el ancho a 0.

13 Jul, 2023 Programación

La necesidad es tener el ancho de la 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;
}



  

  

    
Título

    

      Contenido

En este caso, aunque esté vacía, la columna .card-media permanece con un ancho del 24%. El mismo resultado se obtiene al usar minmax(auto, 24%).
¿Puedo establecer esa columna en 0 usando CSS Grid?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, puedes establecer el ancho de la columna .card-media en 0 cuando está vacía usando CSS Grid. Una forma de lograr esto es definiendo una nueva fila en la cuadrícula y estableciendo su altura en 0 cuando no hay contenido en la columna .card-media. Aquí tienes un ejemplo:

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

/* definir una nueva fila */
.card-row {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  height: 0;
}

/* establecer la altura de la nueva fila en auto cuando hay contenido en la columna .card-media */
.card-media:not(:empty) + .card-content {
  grid-area: card-media;
  margin-right: 2%;
  float: left;
  height: auto;
}

/* establecer la altura de la nueva fila en auto cuando hay contenido en la columna .card-media */
.card-media:not(:empty) + .card-row {
  height: auto;
}

    En este código, definimos una nueva fila de cuadrícula con la clase .card-row que se extiende a través de ambas columnas y tiene su altura establecida en 0. Luego usamos la pseudo-clase :not(:empty) para seleccionar la columna .card-media cuando no está vacía, y establecemos su altura y la altura de .card-row en auto. Esto hará que la columna .card-media se expanda para ajustarse a su contenido, y la nueva fila también se expandirá, empujando hacia abajo las filas .card-content y .card-action en consecuencia.

    Ten en cuenta que esta solución asume que la columna .card-media siempre es la primera columna en la cuadrícula y que no hay otras columnas antes de ella. Si este no es el caso, deberás ajustar los valores grid-column y grid-row para la clase .card-row en consecuencia.

Comments are closed.