¿Cómo puedo crear una cuadrícula dinámica?

Cómo crear una cuadrícula dinámica con un espaciado uniforme

En el presente artículo, abordamos el problema que surge al utilizar una cuadrícula dinámica en una aplicación, donde el espaciado entre los elementos se ve afectado por el tamaño de el elemento más grande en la fila anterior. El objetivo es establecer un espaciado constante entre los elementos, independientemente de su tamaño.

Problema

Al iterar sobre un objeto para listar elementos de usuarios, se observa que el espaciado en cada fila varía según el elemento más grande de la fila anterior. Esto resulta en una apariencia desorganizada y "caja" en la cuadrícula, como se puede ver en la primera imagen proporcionada.

Solución Propuesta

Para lograr un espaciado constante y una mejor presentación, se sugiere realizar modificaciones en la hoja de estilos CSS y en la estructura de la cuadrícula.

Estilos CSS

1. Modificar grid-auto-rows: Cambiar de min-content a un valor fijo (por ejemplo, 200px) para establecer una altura uniforme para cada fila:

   .profileGrid {
    display: grid;
    align-content: center;
    margin: 0px 0px 0px 5%;
    min-width: max-content;
    font: $font-family-primary; 
    justify-content: center;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-auto-rows: 200px; /* Altura fija */
   
    @include md {
      column-gap: 32px;
    }
   
    @include lg {
      grid-template-columns: repeat(1, minmax(0, 1fr)); 
    }
   
    @include xs {
      column-gap: 16px;
      grid-template-columns: repeat(1, minmax(0, 1fr)); 
    }
   }

2. Añadir row-gap: Establecer un espaciado entre filas para brindar una separación constante:

   .profileGrid {
    ...
    row-gap: 20px; /* Espaciado uniforme entre filas */
   }

Resultado Esperado

Al implementar estas modificaciones, se logrará una cuadrícula que tiene un flujo más libre y un espaciado más consistente entre los elementos, similar a la segunda imagen de referencia.

Conclusiones

Aplicando ajustes específicos en las propiedades CSS de grid-auto-rows y row-gap, se puede conseguir una cuadrícula dinámica que no solo sea funcional, sino también estéticamente agradable. Esto permitirá mejorar la experiencia de usuario al presentar los elementos de manera más ordenada y coherente.