28172 sujets

CSS et mise en forme, CSS3

[Résolu] Grid layout : alignement de la grille quelque soit le contenu

Bonsoir,

Parce qu’un exemple vaut mieux qu'un long discours : CodePen (édit : pen mis à jour).
Je fais des essais avec le module Grid Layout : ici le contenu, une longue chaîne de caractères insérée dans une div (simulation d'un lien trop long par exemple), fait exploser la mise en page...

Comment puis-je m'y prendre pour conserver mes colonnes égales en largeur quelque soit la largeur du contenu ?
Modifié par Olivier C (23 Feb 2019 - 21:04)
Modérateur
Salut,

Un overflow: hidden; sur la cellule ?
Doublé d'un word-wrap: break-word; si tu veux que le texte revienne à la ligne.
Modifié par _laurent (23 Feb 2019 - 01:12)
Modérateur
Bonjour,

Il existe un truc qui s'appelle overflow-wrap: break-word; qui normalement fait le job en une ligne "en théorie", et qui est fait pour ça. C'est à tester.

Amicalement,
Merci pour ta solution complémentaire Parsimonhi. Ta solution fonctionne aussi mais dans mon cas je suis quand même obligé de mettre un contexte de formatage overflow sur la boite pour que cela fonctionne. C'est peut-être dû à la définition "responsive" de mes boîtes, je ne sais pas trop... à creuser.
Modérateur
Bonjour,

Cet overflow est malsain selon moi. Il fonctionne par chance.

Il semble que le coupable soit:

.sizeSgrid4 {
    grid-template-columns: repeat(4,1fr);
  }


On peut essayer à la place par exemple (et alors, overflow-wrap: break-word; fonctionne) :
.sizeSgrid4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }


Ceci étant, je ne suis pas un grand expert en grid. Ce n'est peut-être pas très déontologique, ce que je propose, mais ça me parait mieux que le overflow:hidden.

Amicalement,
Modifié par parsimonhi (23 Feb 2019 - 12:50)
Meilleure solution
Ta solution marche parfaitement Parsimonhi, il me semble qu'elle est effectivement la plus adaptée car elle est liée au module grid layout. J'arrive à l'appliquer presque partout dans mon code, je vais voir pour faire des tests sur quelques jours. Merci à toi, vraiment.
Sujet clos
Aller à