Largeur automatique des colonnes grid

Bonjour à tous
Me voici de retour.
Comme j'ai des nouvelles choses (urgentes comme toujours) à faire, et dans le but d'en profiter pour accroître mes connaissances j'essaie d'utiliser "grid" au lieu de <table> (ou display:table)
Dans toute la documentation je vois précisées en dur les largeurs des colonnes.
C'est justement l'intérêt de <table> que de faire en sorte que les largeurs de colonnes puissent être automatiquement calculées en fonction du contenu de la cellule la plus large.
Je suppose qu'il est possible de faire la même chose en "grid", mais je ne vois pas comment faire. Je suppose que ça doit être quelque part et que je n'ai pas compris que c'était là. Il y a tellement de propriétés que je m'y perd.
Pouvez vous m'ouvrir les mirettes?

Et l'eau,

ce lien (à lire jusqu'au bout et lire les liens annexes)
Modifié par niuxe (23 Feb 2020 - 18:35)

niuxe a écrit :
Et l'eau,

ce lien (à lire jusqu'au bout et lire les liens annexes)

Quand je dis "la documentation" c'est à ce bouquin que je me réfère.
Je n'ai pas trouvé où on pouvait faire en sorte que la grille se comporte comme une <table>
Tous mes essais montrent une grille qui prend toute la largeur de l'écran et je ne vois nulle part comment faire que les colonnes s'ajustent à la largeur de la plus grande cellule de la colonne.
Je comprends qu'après avoir craché pendant des années sur les utilisateurs de <table> on a mis pas mal d'années à trouver un succédané. Je ne demande qu'à utiliser le succédané en question, encore faudrait il un mode d'emploi qui permette de ne pas régresser.
Le but c'est d'obtenir ça:

Bonjour,

pour 2 colonnes de largeur identiques : grid-template-columns:repeat(2,1fr) peut servir comme base .
Pour que celles ci se réduisent a la largeur du plus large contenu, je vois 2 options :

- javascript peut servir pour mettre à jour la valeur 1fr en pixels en ajustant l'alignement des colonnes dans leur conteneur avec justify-content:center ;

- ou reduire la taille du conteneur a son contenu avec width:max-content et margin:auto;

tests : https://codepen.io/gc-nomade/pen/xxGgKya

Salut,

PapyJP a écrit :
faire en sorte que les largeurs de colonnes puissent être automatiquement calculées en fonction du contenu de la cellule la plus large.
Je suppose qu'il est possible de faire la même chose en "grid"

Pour faire ça c'est max-content qu'il faut utiliser

display:grid;
grid-template-columns: max-content max-content;

https://jsfiddle.net/8pom3y0t/

max-content
Is a keyword representing the largest maximal content contribution of the grid items occupying the grid track

Modifié par _laurent (23 Feb 2020 - 21:43)

_laurent a écrit :
SPour faire ça c'est max-content qu'il faut utiliser

Merci Laurent, ça règle la moitié du problème, car je voudrais également que la grille elle-même ne soit pas plus large que nécessaire. Pour l'instant elle occupe toute la largeur de l'écran dans mon programme de test.

Bon!
Je crois que je ne comprends rien du tout à cette approche, sans doute géniale puisque tout le monde le dit.
Je pensais que ce serait aussi simple à utiliser que flex, mais ça n'a pas l'air d'être le cas.
Je vais continuer à faire des tests, mais je ne vais pas essayer d'appliquer ça à quelque chose qui doit être disponible dans les prochains jours.
Modifié par PapyJP (23 Feb 2020 - 22:56)

PapyJP a écrit :

Merci Laurent, ça règle la moitié du problème, car je voudrais également que la grille elle-même ne soit pas plus large que nécessaire. Pour l'instant elle occupe toute la largeur de l'écran dans mon programme de test.

quel navigateur utilise tu pour que cela ne fonctionne pas ? https://caniuse.com/#search=max-content

width:max-content ou display:table ont un effet similaire, pour la largeur , le conteneur se rétrécie à la largeur occupée par le contenu ..., il y a aussi inline-grid;

Pour les test, il y en 3 que je t'ai proposé sur le lien en codepen, tous basé sur un template de 2 colonnes de même largeur . 3 différents moyen pour réduire ces 2 colonnes a à l’élément le plus large. JavaScript (pour récupérer les dimensions de l’élément le plus large) , max-content (alternatif à display:table) et le margin:auto dans une boite en flex. Un conteneur parent en display:table ; de ton grid fonctionnerait aussi (je viens de l'ajouter comme un quatrième test et le cinquieme c'est inline-grid avec text-align:center sur body ) https://codepen.io/gc-nomade/pen/xxGgKya

les test sont faisable en cochant la case avec : repeat(2,1fr) ou 2 repeat(2,auto) selon que tu souhaites 2 colonnes de largeurs identiques ou non.

Les test servent a jauger ce qui se rapprocherait du résultat escompter avec leur effet de bords possible et de la faisabilité de la mise en œuvre.

Un codepen à aussi l'avantage d’être éditable en live, ce qui aide a comprendre l'effet de tel ou tel règle en les désactivant ou les modifiant.
https://codepen.io/pen ou https://jsbin.com/ (si test avec IE11) peuvent être ouvert sans avoir besoin de sauvegarder quoi que ce soit pour tester quelques règles CSS avec lesquelles tu n'est pas familier.

bon courage
Modifié par gcyrillus (24 Feb 2020 - 01:45)

Bonjour !

PapyJP a écrit :
ça règle la moitié du problème, car je voudrais également que la grille elle-même ne soit pas plus large que nécessaire. Pour l'instant elle occupe toute la largeur de l'écran dans mon programme de test.

Dans mon exemple c'est le cas...

Tu dois avoir du code qui la force à prendre toute la largeur... sinon tu peux aussi passer en display:inline-grid; (une grid qui se comportera comme un inline block)

Jean-Pierre-Bruneau a écrit :
D'autant plus que l'exemple donné ne me vas pas, si c'est impair coté B une de plus c'est n importe quoi

C'était pas le but de la démo , mai il ne manque pas grand chose pour bien répartir ça hein :

.grid-a {
  background:red;
  grid-column:1;
}
.grid-b {
  background:blue;
  grid-column:2;
}

https://jsfiddle.net/undless/enpco14v/2/

Bon Lundi à tous !

Merci à tous pour vos réponses
Aborder une nouvelle techno est toujours délicat, surtout qu’on a en tête ce qu’on utilise sans réfléchir depuis plus de 20 ans.
Je vais étudier ça de très près.

En regardant les exemples que vous m'avez donnés, je constate que "grid" n'est pas du tout ce que javais cru comprendre.
En fait il ne s'agit pas d'un modèles à deux dimensions lignes/colonnes, mais d'une présentation en deux dimensions de données à une dimension. Donc "grid container" ne correspond pas du tout à "table".

<p>
      <button>some more text </button>
      <button>text </button>
      <button>long text to size the whole grid </button>
      <button>some bits of text </button>
      <button>Lorem Ipsum</button>
      <button>some some text </button>
      <button>some text </button>
      <button>some text </button>
      <button>some text </button>
      <button>some text </button>
      <button>some text </button>
      <button>some text </button>
      <button>some text </button>
      <button>some text </button>
      <button>some text </button>
      <button>some text </button></p>

ne fait pas de différence entre les "boutons pairs" et "boutons impairs".
Non seulement ça ne convient pas au cas où je pensais l'utiliser, mais plus encore je ne vois aucun cas concret dans les sites que je gère où je pourrais avoir l'utilité de ce concept....
Dans le bouquin de Raphaël, p.100 le titre est explicite "Première étape: casser le tableau !"

PapyJP a écrit :
En fait il ne s'agit pas d'un modèles à deux dimensions lignes/colonnes, mais d'une présentation en deux dimensions de données à une dimension. Donc "grid container" ne correspond pas du tout à "table".

Tout a fait. C'est effectivement très troublant au début et même gênant dans quelques situations mais rudement efficace pour de la mise en page poussée et du responsive qui réorganise les éléments.

Par contre la grid n'est pas la réponse absolue. Le flex garde son utilité, le table aussi. Il faut utiliser le grid là ou grid a son utilité, pas juste pour remplacer table parce-que "on est en 2020 quand même"

Bon courage

PapyJP a écrit :
En regardant les exemples que vous m'avez donnés, je constate que "grid" n'est pas du tout ce que javais cru comprendre.
En fait il ne s'agit pas d'un modèles à deux dimensions lignes/colonnes, mais d'une présentation en deux dimensions de données à une dimension. Donc "grid container" ne correspond pas du tout à "table".

En effet, le but n'est pas de remplacer les tableaux, à la limite remplacer les tableaux dans des cas où ils étaient utilisés abusivement.

Grid offre surtout de nouvelle possibilités, qui nécessitaient du bricolage en javascript auparavant, ou juste du confort dans certains cas.

PapyJP a écrit :
En regardant les exemples que vous m'avez donnés, je constate que "grid" n'est pas du tout ce que javais cru comprendre.
En fait il ne s'agit pas d'un modèles à deux dimensions lignes/colonnes, mais d'une présentation en deux dimensions de données à une dimension. Donc "grid container" ne correspond pas du tout à "table".
....

ne fait pas de différence entre les "boutons pairs" et "boutons impairs".
Non seulement ça ne convient pas au cas où je pensais l'utiliser, mais plus encore je ne vois aucun cas concret dans les sites que je gère où je pourrais avoir l'utilité de ce concept....
Dans le bouquin de Raphaël, p.100 le titre est explicite "Première étape: casser le tableau !"

Au temps pour moi, je n'avais pas compris le sens de ta question. En effet la seule analogie avec un tableau est visuelle.

Ceci dit, un grid sur 2 colonnes va placer touts les éléments pairs ou impair du même coté par défaut .

Je remet une démo avec des divs et une lise de définition avec dt/dd pour justifier un usage de grid-column et de grid-row (si bordure ou fond) quand une position pair ou impair dans le flux ne va pas de pairs avec la colonne d'affichage https://codepen.io/gc-nomade/pen/rNVjJLj c'est le dernier cas qui est le plus parlant sur ce que fait grid sans avoir recours à un tableau.
Modifié par gcyrillus (25 Feb 2020 - 10:52)

Jean-Pierre-Bruneau a écrit :
... j'ai encore du boulot.

Je ne sais pas si tu as eu le temps de creuser les ressources regroupées ici , https://www.alsacreations.com/astuce/lire/1739-CSS-Grid-Layout-les-ressources-indispensables-pour-apprendre.html mais tu as de quoi jouer avec le grid-layout

Cdt