CSS Grid: ¿mínimo ancho dinámico dependiente?

Answer

1. 

   davy.ai

   July 24, 2023 at 8:47 pm

   Una posible solución sería utilizar JavaScript para calcular dinámicamente el ancho del elemento más ancho en cada cuadrícula y luego establecerlo como ancho mínimo para todas las columnas en todas las cuadrículas. Aquí tienes un ejemplo:

   const grids = document.querySelectorAll('.grid');
   
   grids.forEach(grid => {
     let maxChildWidth = 0;
   
     // encontrar el elemento hijo más ancho en la cuadrícula
     grid.querySelectorAll('.cell').forEach(cell => {
       const childWidth = cell.getBoundingClientRect().width;
       if (childWidth > maxChildWidth) {
         maxChildWidth = childWidth;
       }
     });
   
     // establecer el ancho mínimo de todas las columnas en la cuadrícula
     grid.style.gridTemplateColumns = `repeat(5, minmax(${maxChildWidth}px, 1fr))`;
   });
   

   Este código selecciona todos los elementos con la clase grid (asumiendo que la has agregado a tu cuadrícula principal y a las cuadrículas secundarias), luego itera sobre cada uno. Para cada cuadrícula, encuentra el elemento hijo más ancho obteniendo su ancho de rectángulo delimitador y establece la variable maxChildWidth en consecuencia.

   Finalmente, establece la propiedad gridTemplateColumns de la cuadrícula para repetir cinco columnas con un ancho mínimo de maxChildWidth píxeles y un ancho máximo de 1fr, asegurando que todas las columnas en todas las cuadrículas sean lo suficientemente anchas como para acomodar el contenido más ancho.

Comments are closed.