28172 sujets

CSS et mise en forme, CSS3

Grid layout module et borders

Salut à tou(te)s,

Existe-t-il une méthode propre pour attribuer des borders aux éléments d'une grille (grid layout module) de telle sorte que celles-ci fusionnent lorsqu'elles sont adjacentes (à l'instar d'un "border-collapse: collapse" dans un tableau) ?

Pour l'instant, je parviens au résultat escompté en :

- fixant un gap de column et de row à "N px" ("N px" étant la size de la border virtuelle) ;
- attribuant une border à la grid (border extérieure) ;
- attribuant un background à la grid (dont la valeur sera la color de la border virtuelle) ;
- attribuant un background différent aux cells (dont la valeur est identique à celle du body) ;
- lorsque la taille des columns/rows est exprimée en pourcentage, en soustrayant à la valeur normale de la dernière column/row "N x (nombre de columns - 1)" ou "N x (nombre de rows - 1)" ;

Nota: lorsque la taille des columns/rows correspond à "auto", la dernière étape n'est pas nécessaire.

https://codepen.io/anon/pen/woNyJK?editors=1100
(l'exemple est trivial, imaginez une grille plus complexe)

Ça fonctionne et ça produit une "graceful degradation" pour les navigateurs qui ne supportent pas le grid layout module (contrairement à une approche consistant à attribuer de véritables borders à chaque cell/ensemble de cells individuellement)... mais ça relève du bidouillage et ça casse le principe des grids dans la mesure où mes CSS dépendent directement de la position de mes cells.

Une meilleure idée ? Smiley smile
Modifié par Akhilleus (19 Dec 2016 - 15:46)
Bonjour .

Pourquoi ne pas mettre une couleur de fond pour ul, utiliser grid-gap et des couleurs de fond différentes pour les li ? Et un border transparent ou un padding pour ul.

Mais ce que vous faites ressemble fort à un tableau... Dès lors, pourquoi s'embêter avec les Grid Layout ?

Sans compter qu'il est toujours possible d'utiliser une méthode mixte : GridLayout pour une mise en place général et Flexbox ou tableau pour un placement en ligne....

Smiley smile
Bonjour,

Merci pour ta réponse.
Zelena a écrit :
Pourquoi ne pas mettre une couleur de fond pour ul, utiliser grid-gap et des couleurs de fond différentes pour les li ?
C'est... précisément ce que je fais...
Zelena a écrit :
Mais ce que vous faites ressemble fort à un tableau... Dès lors, pourquoi s'embêter avec les Grid Layout ?
L'exemple que je donne est trivial (cf. mon commentaire), il ne s'agit pas de représenter des données tabulaire mais de définir un layout. C'est amusant, je demande "comment faire une pizza ?" et tu me réponds en substance : "ce que tu fais ressemble fort à une tarte, pourquoi ne pas faire une tarte à la tomate ?" Smiley confus
Zelena a écrit :
Sans compter qu'il est toujours possible d'utiliser une méthode mixte : GridLayout pour une mise en place général et Flexbox ou tableau pour un placement en ligne....
J'en suis bien conscient Smiley cligne mais ça n'a pas de rapport avec la problématique des borders soulevée dans mon message.
Modifié par Akhilleus (19 Dec 2016 - 15:42)
Akhilleus a écrit :

C'est... précisément ce que je fais...

Pas exactement. En fait pas complètement...

Ces histoires de Codepen, je ne suis pas très à l'aise... donc

Le HTML ne change pas, le CSS :

ul
	{
	display : grid;
	grid-gap : 1rem;
	grid-template-columns : 50% 50%;
	background-color : crimson;
	list-style-type : none;
	margin : 0;
	padding : 0;
	padding-right : 1rem /* Il faut rajouter ça mais je ne comprends pas */
	border : 1rem solid transparent;
	}
li
	{
	background-color : gold;
	}


Les valeurs et les couleurs sont différentes... mais c'est analogue à un border-collapse : collapse... je pense.

Smiley smile
Modifié par Zelena (19 Dec 2016 - 17:42)
Zelena a écrit :
Pas exactement. En fait pas complètement...

Les valeurs et les couleurs sont différentes... mais c'est analogue à un border-collapse : collapse... je pense. Smiley smile
Voilà un codepen pour ton exemple : https://codepen.io/anon/pen/ObdEGR?editors=1100#0

Ça revient exactement au même. Si tu regardes les cellules 2 et 4, elles dépassent sur la border (à droite). Il faut utiliser le bidouillage que j'explique plus haut pour parvenir au résultat escompté :

https://codepen.io/anon/pen/LbqrwK?editors=1100#0
grid-template-columns : 50% calc(50% - 1rem);
/*
valeur en % - (valeur du gap . (nombre de col - 1))
soit 50% - 1rem . (2 - 1)
soit 50% - 1rem
*/
Zelena a écrit :
Ces histoires de Codepen, je ne suis pas très à l'aise... donc
C'est plus simple qu'il n'y parait : tu édites ton html, css et eventuellement js dans les "cases" qui correspondent et cliques "save" dans le header quand tu as terminé, tu es ensuite redirigé(e) vers une nouvelle page dont tu peux partager l'URL. Tu peux aussi "forker" (créer une nouvelle version éditable) d'un code dont tu n'es pas l'auteure.
Effectivement, que ce soit votre façon de faire ou la mienne, cela revient au même... Smiley sweatdrop

On dirait que la valeur de grid-gap-column s'ajoute au lieu d'être retranché avant le calcul des colonnes... Smiley ohwell

Une façon un peu plus satisfaisante est d'appliquer calc à la définition des deux colonnes :
grid-template-columns : calc(50% - 'valeur de grid-gap'/2) calc(50% - 'valeur de grid-gap'/2);

pour que les deux colonnes aient la même largeur...

Reste à savoir si cela traduit bien la façon dont grid-gap a été envisagé...
Je n'ai accès qu'à Mozilla Firefox 48, j'ai déjà constaté un bug non négligeable corrigé dans Firefox 49...

Merci pour l'explication pour le Codepen. 'Forker', je n'ai jamais fait...

Smiley smile
Modifié par Zelena (19 Dec 2016 - 19:41)
Modérateur
as tu tenté :

	grid-template-columns : 50% auto;


ou


	grid-template-columns : auto auto;


pour t'affranchir de calc() ?
Ça n'a pas l'air de fonctionner, gcyrillus... Smiley ohwell

Mais ce n'est pas grave... il se passera encore du temps avant que le module Gridlayout soit finalisé et son usage répandu.

Smiley smile
gcyrillus a écrit :
Quel(s) navigateur(s) utilises tu pour tester grid ?

Firefox 48... Ma machine est trop vieille pour aller au-delà...

Bonsoir.

Smiley fatigue
Merci pour vos réponses.
gcyrillus a écrit :
as tu tenté:
...
Comme indiqué dans mon premier message :
Akhilleus a écrit :
Nota: lorsque la taille des columns/rows correspond à "auto", la dernière étape n'est pas nécessaire.
Par ailleurs,
Zelena a écrit :
Mais ce n'est pas grave... il se passera encore du temps avant que le module Gridlayout soit finalisé et son usage répandu.
gcyrillus a écrit :
oui ça va prendre un certain temps ... Smiley smile
Je dirai plutôt "un temps certain" : dans un peu plus de trois mois - pour être précis, ça ship dans Chrome (14 mars) et Firefox (7 mars) par défaut... couplé avec @supports et autres, ce sera utilisable sans plus attendre (Firefox dev edition dispose d'ores et déjà d'outils - certes rudimentaires - pour aider à travailler avec les grids...).
Administrateur
Bonjour,

grid-gap sert à définir une gouttière et pas des bordures communes mais visuellement ça revient au même donc ta méthode me semble appropriée... tant qu'il n'y a pas de trou dans la grille comme https://codepen.io/anon/pen/BQMgbY?editors=0100
L'utilisation habituelle de Grid Layout, ça va être des items qui géreront eux-mêmes leurs bordures (ou absence de bordure et couleur/image de fond le cas échéant), sans savoir s'ils ont des voisins adjacents.

Dans la spec de CSS Grid Layout, il est question de collapsed et collapsed track et gutter mais après survol je ne suis pas sûr d'avoir compris de quoi il s'agissait. Quand aucun grid item ne termine ou commence sur un track donné, il devient inutile ? Les Issues GitHub en lien dans Changes (la 8 https://github.com/w3c/csswg-drafts/issues/172 ) sont peut-être plus claires ? Dans cette dernière Issue, il est explicitement question de la non-implémentation de visibility: collapse(d)
Modifié par Felipe (20 Dec 2016 - 06:30)
Felipe a écrit :
Bonjour,
Ça faisait longtemps Smiley smile
Merci pour ta réponse.
Felipe a écrit :
grid-gap sert à définir une gouttière et pas des bordures communes mais visuellement ça revient au même donc ta méthode me semble appropriée... tant qu'il n'y a pas de trou dans la grille comme https://codepen.io/anon/pen/BQMgbY?editors=0100
En effet.
Felipe a écrit :
Dans la spec de CSS Grid Layout, il est question de collapsed et collapsed track et gutter mais après survol je ne suis pas sûr d'avoir compris de quoi il s'agissait. Quand aucun grid item ne termine ou commence sur un track donné, il devient inutile ? Les Issues GitHub en lien dans Changes (la 8 https://github.com/w3c/csswg-drafts/issues/172 ) sont peut-être plus claires ? Dans cette dernière Issue, il est explicitement question de la non-implémentation de visibility: collapse(d)
Je viens de voir qu'il y avait aussi une série d'issues ouvertes pour Firefox qui pourraient expliquer ce problème de calcul (de non-prise en compte du/des gap(s)) : https://bugzilla.mozilla.org/show_bug.cgi?id=616605 . Je vais faire le tour de la question et ouvrir une issue si nécessaire, parce que, comme toi, en lisant la spec, je n'ai pas trouvé de réponse évidente.
Modifié par Akhilleus (20 Dec 2016 - 17:55)
Sujet clos
Aller à