2

Buen día.

He creado una cuadricula con css grid y necesito que el tamaño de las celdas (height) varien segun el contenido de la celda y que la celda que este de bajo suba. las celdas se llenan de forma dinamica cuando se consume una API.

Así esta actualmente el menu introducir la descripción de la imagen aquí

Esta es la estructura HTML que se genera de forma dinamica introducir la descripción de la imagen aquí

Este es el css

.ECommerce__Menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
}
.ECommerce__Menu #DivCategorias {
    width: 180px;
    grid-column: 1;
    grid-row: 1;
}
.ECommerce__Menu #DivLineas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.ECommerce__Menu .ItemLinea{
    width: 250px;
    padding-right: 20px;
}

1 respuesta 1

2

Si quieres que la celda de abajo suba para ocupar el sobrante de su superior, con grid no sería posible porque al final el grid se comporta como si fuese una tabla. Quizá la mejor opción sería usar flexbox en columna.

Para ello, al contenedor (en tu caso #DivLineas) tendrías que darle un height (aunque sean 100vh, también te sirve para que siga siendo dinámico). Y con eso le aplicarías las propiedades:

#divLineas {
  display: flex;
  flex-flow: column;
  flex-wrap: wrap;
  height: 500px;
 }
 
 .ItemLinea {
   border: 1px solid lightgray;
   padding: 10px;
 }
<div id="divLineas">

  <div class="ItemLinea">
    <h5>Título</h5>
    <div>Contenido</div>
    <div>Contenido</div>
    <div>Contenido</div>
    <div>Contenido</div>
    <div>Contenido</div>
  </div>
  
  <div class="ItemLinea">
    <h5>Título</h5>
    <div>Contenido</div>
    <div>Contenido</div>
    <div>Contenido</div>
    <div>Contenido</div>
    <div>Contenido</div>
    <div>Contenido</div>
    <div>Contenido</div>
    <div>Contenido</div>
    <div>Contenido</div>
  </div>
  
  <div class="ItemLinea">
    <h5>Título</h5>
    <div>Contenido</div>
    <div>Contenido</div>
    <div>Contenido</div>
    <div>Contenido</div>
    <div>Contenido</div>
    <div>Contenido</div>
    <div>Contenido</div>
    <div>Contenido</div>
    <div>Contenido</div>
  </div>
  
  <div class="ItemLinea">
    <h5>Título</h5>
    <div>Contenido</div>
    <div>Contenido</div>
    <div>Contenido</div>
    <div>Contenido</div>
    <div>Contenido</div>
  </div>
  
  <div class="ItemLinea">
    <h5>Título</h5>
    <div>Contenido</div>
    <div>Contenido</div>
    <div>Contenido</div>
    <div>Contenido</div>
    <div>Contenido</div>
  </div>
  
  <div class="ItemLinea">
    <h5>Título</h5>
    <div>Contenido</div>
    <div>Contenido</div>
    <div>Contenido</div>
    <div>Contenido</div>
    <div>Contenido</div>
  </div>
  
  <div class="ItemLinea">
    <h5>Título</h5>
    <div>Contenido</div>
    <div>Contenido</div>
    <div>Contenido</div>
    <div>Contenido</div>
    <div>Contenido</div>
  </div>
  
</div>

Con esto, los elementos se apilarían hacia abajo y, cuando uno ya no quepa, pasaría a la columna siguiente.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.