TL; DR: ¿Hay algo comotable-layout: fixed para rejillas 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 la cuadrícula del 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 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, dije que mi cuadrícula de año tenía un 100% de ancho y alto, por lo que probablemente ese sea el punto de partida, pero no pude encontrar ninguna propiedad CSS relacionada con la cuadrícula que pudiera satisfacer esa necesidad.

Descargo de responsabilidad: Soy consciente de que hay formas bastante sencillas de diseñar ese calendario simplemente sin usar 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.