TL; DR: ¿Hay algo parecido table-layout: fixed
a 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.