Evitar que el contenido expanda elementos de la grilla

TL; DR: ¿Hay algo como table-layout: fixed para grillas de CSS?


Traté de crear un calendario de vista anual con una gran cuadrícula de 4×3 para los meses y en ella cuadrículas anidadas de 7×6 para los días.

El calendario debe llenar la página, por lo que el contenedor de la cuadrícula anual tiene un ancho y una altura del 100% cada uno.

 .year-grid { width: 100%; height: 100%; display: grid; grid-template: repeat(3, 1fr) / repeat(4, 1fr); } .month-grid { display: grid; grid-template: repeat(6, 1fr) / repeat(7, 1fr); } 

Aquí hay un ejemplo de trabajo: https://codepen.io/loilo/full/ryXLpO/

Para simplificar, cada mes en ese bolígrafo tiene 31 días y comienza el lunes.

También elegí un tamaño de letra ridículamente pequeño para demostrar el problema:

Los elementos de cuadrícula (= celdas de día) están bastante condensados ​​ya que hay varios cientos de ellos en la página. Y tan pronto como las tags de los números del día sean demasiado grandes (siéntase libre para jugar con el tamaño de fuente en el bolígrafo usando los botones en la esquina superior izquierda), la cuadrícula crecerá en tamaño y excederá el tamaño del cuerpo de la página.

¿Hay alguna forma de prevenir este comportamiento?

Inicialmente, declaré que mi cuadrícula de año era del 100% en ancho y alto, por lo que ese es probablemente el punto para comenzar, pero no pude encontrar ninguna propiedad de CSS relacionada con la cuadrícula que se ajustara a esa necesidad.

Descargo de responsabilidad: soy consciente de que hay formas bastante sencillas de personalizar ese calendario sin utilizar el diseño de cuadrícula CSS. Sin embargo, esta pregunta es más sobre el conocimiento general sobre el tema que la solución del ejemplo concreto.

De forma predeterminada, un elemento de la cuadrícula no puede ser más pequeño que el tamaño de su contenido.

Los elementos de cuadrícula tienen un tamaño inicial de min-width: auto y min-height: auto .

Puede anular este comportamiento estableciendo los elementos de la grilla en min-width: 0 , min-height: 0 o overflow con cualquier valor que no sea visible .

De la especificación:

6.6. Tamaño mínimo automático de los artículos de la rejilla

Para proporcionar un tamaño mínimo predeterminado más razonable para los elementos de la grilla, esta especificación define que el valor auto de min-width / min-height también aplica un tamaño mínimo automático en el eje especificado a los elementos de la grilla cuyo overflow es visible . (El efecto es análogo al tamaño mínimo automático impuesto a los artículos flexibles).

Aquí hay una explicación más detallada que cubre los artículos flexibles, pero también se aplica a los elementos de la cuadrícula:

  • ¿Por qué los elementos de flexión no se reducen después del tamaño del contenido?

Esta publicación también cubre problemas potenciales con contenedores nesteds y diferencias de representación conocidas entre los principales navegadores .


Para arreglar su diseño, realice estos ajustes en su código:

 .month-grid { display: grid; grid-template: repeat(6, 1fr) / repeat(7, 1fr); background: #fff; grid-gap: 2px; min-height: 0; /* NEW */ min-width: 0; /* NEW; needed for Firefox */ } .day-item { padding: 10px; background: #DFE7E7; overflow: hidden; /* NEW */ min-width: 0; /* NEW; needed for Firefox */ } 

codepen revisado