Empêcher le contenu d'étendre les éléments de la grille
TL;DR: y a-t-il quelque chose comme table-layout: fixed pour les grilles CSS?
" j'ai essayé de créer un calendrier avec une vue de l'année avec une grande grille de 4x3 pour les mois et là emboîtés grilles de 7x6 pour les jours.
le calendrier devrait remplir la page, de sorte que l'année conteneur grille obtient 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 pratique: https://codepen.io/loilo/full/ryXLpO /
pour la simplicité, chaque mois dans ce stylo il a 31 jours et commence un lundi.
j'ai aussi choisi une taille de police ridiculement petite pour démontrer le problème:
Les éléments de la grille(=cellules de jour) sont assez condensés puisqu'il y en a plusieurs centaines sur la page. Et dès que les étiquettes de nombre de jour deviennent trop grand (n'hésitez pas à jouer avec la taille de la police dans le stylo en utilisant les boutons en haut à gauche) la grille va juste croître en taille et dépasser la taille du corps de la page.
y a-t-il un moyen de prévenir ce comportement?
j'ai d'abord déclaré ma grille de l'année à 100% en largeur et en hauteur, donc c'est probablement le point de départ, mais je n'ai pas pu trouver de propriétés CSS liées à la grille qui auraient adapté ce besoin.
Avertissement: je suis conscient qu'il y a assez facile des façons de styliser ce calendrier sans utiliser la disposition de la grille CSS. Cependant, cette question concerne davantage les connaissances générales sur le sujet que la résolution de l'exemple concret.
2 réponses
par défaut, un élément de grille ne peut pas être plus petit que la taille de son contenu.
Les éléments de la grille ont une taille initiale de min-width: auto et min-height: auto .
vous pouvez modifier ce comportement en définissant les éléments de grille à min-width: 0 , min-height: 0 ou overflow avec toute valeur autre que visible .
De la spec:
6.6. Dimension minimale automatique de la grille Articles
pour fournir une taille minimale par défaut plus raisonnable pour les éléments de grille, ce la spécification définit que la valeur
autodemin-width/min-heightapplique également une taille minimale automatique dans l'axe spécifié aux éléments de grille dont laoverflowestvisible. (L'effet est analogue à la taille minimale imposée automatiquement aux articles flexibles.)
voici une explication plus détaillée couvrant les éléments flexibles, mais elle s'applique aussi aux éléments de la grille:
Ce poste couvre également les problèmes potentiels avec les conteneurs imbriqués et connu différences d'interprétation entre les principaux navigateurs .
pour corriger votre mise en page, faites ces ajustements à votre code:
.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 */
}
la réponse précédente est assez bonne, mais je voulais aussi mentionner qu'il y a est un layout fixe équivalent pour les grilles, vous avez juste besoin d'écrire minmax(0, 1fr) au lieu de 1fr comme la taille de votre piste.