Empêcher le contenu de développer les éléments de la grille

TL; DR: Y a - t-il quelque chose comme table-layout: fixedpour 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.

Par défaut, un élément de la 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: autoet min-height: auto.

Vous pouvez modifier ce comportement en définissant les éléments de la grille à min-width: 0, min-height: 0ou overflowavec toute autre valeur que visible.

De la spécification:

6.6. Taille minimale automatique des éléments de la grille

Pour fournir une taille minimale par défaut plus raisonnable pour les éléments de la grille, cette spécification définit que la autovaleur de min-width/ min-heightapplique également une taille minimale automatique dans l'axe spécifié aux éléments de la grille dont overflowest visible. (L'effet est analogue à la taille minimale automatique imposée aux éléments flexibles.)

Voici une explication plus détaillée couvrant les éléments flexibles, mais elle s'applique également aux éléments de la grille:

• Pourquoi les éléments flexibles ne réduisent-ils pas la taille du contenu?

Cet article couvre également les problèmes potentiels avec les conteneurs imbriqués et les différences de rendu connues entre les principaux navigateurs .

Pour corriger votre mise en page, apportez 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 */
}

codepen révisé

1fr contre minmax(0, 1fr)

La solution ci-dessus fonctionne au niveau de l'élément de la grille. Pour une solution au niveau du conteneur, consultez cet article:

• Comment se fait-il que minmax (0, 1fr) fonctionne pour les éléments longs alors que 1fr ne fonctionne pas?

La réponse précédente est assez bonne, mais je voulais aussi mentionner qu'il est un équivalent de mise en page fixe pour les réseaux, vous avez juste besoin d'écrire au minmax(0, 1fr)lieu de 1frvotre taille de piste.

Les réponses existantes résolvent la plupart des cas. Cependant, je suis tombé sur un cas où j'avais besoin du contenu de la cellule de la grille overflow: visible. Je l'ai résolu en positionnant absolument dans un emballage (pas idéal, mais le meilleur que je connaisse), comme ceci:

.month-grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
  background: #fff;
  grid-gap: 2px;  
}

.day-item-wrapper {
  position: relative;
}

.day-item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px;

  background: rgba(0,0,0,0.1);
}

https://codepen.io/bjnsn/pen/vYYVPZv

une chose plus facile à faire consiste à définir la largeur maximale de l'élément de la grille comme ceci:

//for the container
.gridContainer{
    display: grid;
    grids-templates-column: repeat (12, 1fr);
 }

 //for the grid item
 .gridItem{
       max-width: 100%;
       grid-column: span 4  //4 can be any number from1-12 as we specified in the grid template
  }