web-dev-qa-db-fra.com

Empêcher le contenu de développer des é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 grande grille 4x3 pour les mois et une grille 7x6 imbriquée pour les jours.

Le calendrier doit remplir la page afin que le conteneur de grille d'année ait une largeur et une hauteur de 100% chacune.

.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 ce stylo a une durée de 31 jours et commence le 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 nombre de jours deviennent trop grandes (n'hésitez pas à jouer avec la taille de la police dans le stylo à l'aide des boutons en haut à gauche), la grille grossira et dépassera la taille de la page.

Est-il possible d'empêcher ce comportement?

Au départ, j'avais déclaré que ma grille annuelle était à 100% en largeur et en hauteur, donc c'est probablement le point de départ, mais je ne pouvais trouver aucune propriété CSS liée à la grille qui aurait répondu à ce besoin.

Avertissement: Je suis conscient du fait qu'il existe des moyens assez simples de styliser cet agenda sans utiliser CSS Grid Layout. Cependant, cette question concerne davantage les connaissances générales sur le sujet que la résolution de l'exemple concret.

csscss3grid-layoutcss-grid
106
Loilo

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 remplacer ce comportement en définissant les éléments de la grille sur min-width: 0, min-height: 0 ou overflow avec une valeur autre que visible.

À partir 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 grille, cette spécification définit que la valeur auto de min-width/min-height applique également une taille minimale automatique dans l'axe spécifié aux éléments de grille dont overflow est 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:

Cet article traite également des problèmes potentiels liés aux conteneurs imbriqués et aux différences de rendu connues entre les principaux navigateurs .

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

code révisé

1fr vs minmax(0, 1fr)

La solution ci-dessus fonctionne au niveau de l'élément de grille. Pour une solution au niveau du conteneur, voir ce post:

180
Michael_B

La réponse précédente est plutôt bonne, mais je voulais aussi mentionner qu’il existe est une mise en page fixe équivalente pour les grilles, il vous suffit d’écrire minmax(0, 1fr) au lieu de 1fr comme piste. Taille.

30
FremyCompany