Evitar que el contenido expanda elementos de cuadrícula

TL; DR: ¿Hay algo parecido table-layout: fixeda las cuadrículas CSS?

Traté de crear un calendario de vista anual con una gran cuadrícula de 4x3 para los meses y en él cuadrículas anidadas de 7x6 para los días.

El calendario debe llenar la página, por lo que el contenedor de cuadrícula de año obtiene 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 un lunes.

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

Los elementos de la 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 etiquetas de número de día se vuelvan demasiado grandes (siéntase libre de jugar con el tamaño de fuente en el lápiz usando los botones en la parte 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 tenía un ancho y una altura del 100%, por lo que probablemente ese sea el punto de partida, pero no pude encontrar ninguna propiedad CSS relacionada con la cuadrícula que se ajustara a esa necesidad.

Descargo de responsabilidad: Soy consciente de que hay formas bastante sencillas de diseñar ese calendario sin usar CSS Grid Layout. Sin embargo, esta pregunta es más sobre el conocimiento general sobre el tema que la solución del ejemplo concreto.

De manera predeterminada, un elemento de 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: autoy min-height: auto.

Puede anular este comportamiento estableciendo elementos de cuadrícula en min-width: 0, min-height: 0o overflowcon cualquier valor que no sea visible.

De la especificación:

6.6. Tamaño mínimo automático de elementos de cuadrícula

Para proporcionar un tamaño mínimo predeterminado más razonable para los elementos de la cuadrícula, esta especificación define que el autovalor de min-width/ min-heighttambién aplica un tamaño mínimo automático en el eje especificado a los elementos de la cuadrícula de quién overflowes 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 elementos flexibles, pero también se aplica a los elementos de la cuadrícula:

• ¿Por qué los elementos flexibles no reducen el tamaño del contenido?

Esta publicación también cubre problemas potenciales con contenedores anidados 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

1fr vs minmax(0, 1fr)

La solución anterior funciona a nivel de elemento de cuadrícula. Para una solución a nivel de contenedor, vea esta publicación:

• ¿Cómo es que minmax (0, 1fr) funciona para elementos largos mientras que 1fr no?

La respuesta anterior es bastante bueno, pero también quería mencionar que no es un equivalente de diseño fijo para las redes, sólo tiene que escribir minmax(0, 1fr)en lugar de 1frcomo su tamaño de la pista.

Las respuestas existentes resuelven la mayoría de los casos. Sin embargo, me encontré con un caso en el que necesitaba que estuviera el contenido de la celda de cuadrícula overflow: visible. Lo resolví colocando absolutamente dentro de un contenedor (no ideal, pero lo mejor que sé), así:

.month-grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
  background: #fff;
  grid-gap: 2px;  
}

.day-item-wrapper {
  position: relative;
}

.day-item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px;

  background: rgba(0,0,0,0.1);
}

https://codepen.io/bjnsn/pen/vYYVPZv

una cosa más fácil de hacer es establecer el ancho máximo del elemento de cuadrícula de esta manera:

//for the container
.gridContainer{
    display: grid;
    grids-templates-column: repeat (12, 1fr);
 }

 //for the grid item
 .gridItem{
       max-width: 100%;
       grid-column: span 4  //4 can be any number from1-12 as we specified in the grid template
  }