TL; DR: Esiste qualcosa di simile table-layout: fixed
alle griglie CSS?
Ho provato a creare un calendario con vista annuale con una grande griglia 4x3 per i mesi e in essa nidificate griglie 7x6 per i giorni.
Il calendario dovrebbe riempire la pagina, quindi il contenitore della griglia dell'anno ottiene una larghezza e un'altezza del 100% ciascuno.
.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);
}
Ecco un esempio funzionante: https://codepen.io/loilo/full/ryXLpO/
Per semplicità, ogni mese in quella penna ci sono 31 giorni e inizia un lunedì.
Ho anche scelto una dimensione del carattere ridicolmente piccola per dimostrare il problema:
Gli elementi della griglia (= celle giornaliere) sono piuttosto concentrati in quanto ce ne sono diverse centinaia nella pagina. E non appena le etichette dei numeri del giorno diventano troppo grandi (sentiti libero di giocare con la dimensione del carattere nella penna usando i pulsanti in alto a sinistra) la griglia aumenterà di dimensioni e supererà le dimensioni del corpo della pagina.
C'è un modo per prevenire questo comportamento?
Inizialmente ho dichiarato che la mia griglia dell'anno era al 100% in larghezza e altezza, quindi è probabilmente il punto da cui partire, ma non sono riuscito a trovare alcuna proprietà CSS relativa alla griglia che si sarebbe adattata a tale necessità.
Dichiarazione di non responsabilità: sono consapevole del fatto che esistono modi abbastanza semplici per modellare quel calendario solo senza utilizzare il layout griglia CSS. Tuttavia, questa domanda riguarda più le conoscenze generali sull'argomento che la soluzione dell'esempio concreto.