TL; DR: Y a - t-il quelque chose comme table-layout: fixed
pour les grilles CSS?
J'ai essayé de créer un calendrier à vue annuelle avec une grande grille 4x3 pour les mois et des grilles 7x6 imbriquées pour les jours.
Le calendrier doit remplir la page, de sorte que le conteneur de la grille d'année a une largeur et une hauteur de 100% chacun.
.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);
}
Voici un exemple de travail: https://codepen.io/loilo/full/ryXLpO/
Pour simplifier, chaque mois dans cet enclos a 31 jours et commence un lundi.
J'ai également choisi une taille de police ridiculement petite pour illustrer le problème:
Les éléments de la grille (= cellules de jour) sont assez condensés car il y en a plusieurs centaines sur la page. Et dès que les étiquettes de numéro de jour deviennent trop grandes (n'hésitez pas à jouer avec la taille de la police dans le stylo en utilisant les boutons en haut à gauche), la grille augmentera simplement en taille et dépassera la taille du corps de la page.
Existe-t-il un moyen d'empêcher ce comportement?
J'ai initialement déclaré que ma grille d'année était à 100% en largeur et en hauteur, c'est donc probablement le point de départ, mais je n'ai pas trouvé de propriétés CSS liées à la grille qui auraient répondu à ce besoin.
Avertissement: je suis conscient qu'il existe des moyens assez simples de styliser ce calendrier sans utiliser CSS Grid Layout. Cependant, cette question concerne plus les connaissances générales sur le sujet que la résolution de l'exemple concret.