[Résolu] Border-collapse pour Grid

Bonjour,

Je me demande comment gérer les bordures dans un GRID responsive en auto-fill.
L'objectif est d'avoir une bordure de 1px avec équivalent border-collapse.

Par exemple :

<ul>
<li><img src="im/mu/2128-1G.webp" alt="" width="100" /></li>
<li><img src="im/mu/2128-2G.webp" alt="" width="100"  /></li>
<li><img src="im/mu/2128-3G.webp" alt="" width="100"  /></li>
<li><img src="im/mu/2128-4G.webp" alt="" width="100" /></li>
</ul>

ul {width: 100%; display: grid; grid-template-columns: repeat(auto-fill, 110px); grid-template-rows: auto}
ul > li {display: grid; grid-template-rows: subgrid}
ul img {display: grid; place-content: center; padding: 5px; border: 1px solid var(--gris-fonce)}

Visuellement les bordures gauche + droite sont plus épaisses que 1px.

Je peux supprimer les bordures droite sauf pour la dernière image

ul > li:not(:last-child) > img {border-right-width: 0}

Très bien si les 4 images sont sur la même ligne mais problème dès que cela passe sur 2 lignes la dernière image de la première ligne n'aura pas de bordure droite.

Vpyez-vous une solution ?

Merci d'avance.
Modifié par boteha_2 (08 Jun 2025 - 23:11)

Bonjour,

Tu peut regarder du coté de outline au lieu de border:

li{outline: 1px solid var(--gris-fonce, #777)

Si tu n'as aucun gap entre les <li>, les outline vont en principe se superposés.

https://codepen.io/gc-nomade/pen/bNdoXRg

cdt
Modifié par gcyrillus (09 Jun 2025 - 14:11)

Bonjour gcyrillus,

Merci de ton suivi.

Outline semble ne pas régler mon problème.
Visuellement la superposition de la bordure gauche et de la bordure droite créées par Outilne est plus forte que par exemple la bordure du haut.
De ce point de vue ce n'est pas mieux que border, même si je comprends la différence (outline ne change pas la taille de l'élément)..
D'autre part sauf erreur la propriété outline-right n'existe pas.

C'est une usine à gaz mais Container Query me semble possible.

La largeur des images étant fixe c'est facile.

li >img {border: 1px solid var(--gris-fonce)}

ul
{
container-type: inline-size;
container-name: photos;
}
/* 4 éléments de 111 + 111 + 111 + 112 */
@container photos (width >= 444px)
{
li:nth-child(-n+3) >img {border-right-width: 0)}
 }

/* 3 éléments de 111 + 111 + 112 */
@container photos (444px > width >= 334px)
{
li:nth-child(-n+2) >img {border-right-width: 0)}

li:last-child >img {border-top-width: 0)}
}

etc...

Mais j'ai deux problèmes.

1)
Je ne sais pas pourquoi je n'arrive pas à avoir ul width: auto avec affichage horizontal des éléments.
Si je ne donne pas width j'ai un affichage vertical sur une colonne.
ul {width: 100%;} la longueur n'est plus la somme des éléments.

2)
Mes container queries ne fonctionnent pas.
Vois-tu un bug dans le code, je me suis inspiré de cet article.
Modifié par boteha_2 (09 Jun 2025 - 15:52)

Bonne nouvelle mes container queries fonctionnent.

Par contre la question cruciale de width du container est non réglée, mais c'est une question qui concerne Grid.

Je réalise que le nombre d'images est variable, les queries dépendent du nombre d'éléments.

Par exemple, si 4 éléments de 100 (pour simplifier).

400 = 4
li:nth-child(-n+3) > img {border-right-width: 0)}

300 = 3 + 1
li:nth-child(-n+2) > img {border-right-width: 0)}
li:last-child > img {border-top-width: 0)}

200 = 2 + 2
li:nth-child(odd) > img {border-right-width: 0)}
li:nth-child(n+3) > img {border-top-width: 0)}

100 = 1 + 1 + 1 + 1
li:nth-child(n+2) > img {border-top-width: 0)}

Si 3 éléments

300 = 3
li:nth-child(-n+2) > img {border-right-width: 0)}

200 = 2 +1
li:first-child > img {border-right-width: 0)}
li:last-child > img {border-top-width: 0)}

100 = 1 + 1 + 1
li:nth-child(n+2) > img {border-top-width: 0)}

La déclaration devra être créée de façon dynamique côté serveur.
Bien compliqué pour bêtement remplacer border-collapse: collapse...

Tu devrais vraiment creusé la piste du outline et faire différents essai (avec des chemins valides pour les images ou pas d'images)

cdt

Hello gcyrillus,

Sur ton codepen je vois sur Firefox que les bordures verticales sont plus fortes que les bordures horizontales, sauf première et dernière bordures verticales qui sont égales aux horizontales.

Vois-tu la même chose ?

C'est justement ce que je peux éviter.
Et c'est pourquoi outline semble ne pas convenir.

boteha_2 a écrit :
Hello gcyrillus,

Sur ton codepen je vois sur Firefox que les bordures verticales sont plus fortes que les bordures horizontales, sauf première et dernière bordures verticales qui sont égales aux horizontales.

Vois-tu la même chose ?

C'est justement ce que je peux éviter.
Et c'est pourquoi outline semble ne pas convenir.

Okay,

voici ce que je vois en cachant les images qui ne se chargent pas :

cdt

Bonsoir gcyrillus,

Voilà ce que je vois avec Firefox sous Windows 10.



Idem avec Chrome.

L'effet indésirable est net, non ?
Modifié par boteha_2 (09 Jun 2025 - 21:26)

boteha_2 a écrit :
Bonsoir gcyrillus,

Voilà ce que je vois avec Firefox sous Windows 10.

Idem avec Chrome.

L'effet indésirable est net, non ?

Il est tout à fait possible que cela dépende de ta résolution d'écran (pixel-ratio) et que la valeur "1px" soit rendue différemment. Vérifie dans l'inspecteur de ton navigateur quelle est la valeur calculée de "outline-width" : certaines valeurs sont résolues en "sub-pixels".

Personnellement j'ai le même affichage que Gcyrillus dans tous mes navigateurs avec la valeur

outline: 1px solid;

Pour obtenir un effet indésirable, je dois ajouter un pixel et j'aurais exactement comme dans ta capture d'écran

outline: 2px solid;

J'ai deux pistes que tu peux tester et qui pourraient annuler ces effets de sub-pixels :
1. Aussi curieux que ça paraisse, la valeur "thin" semble plus stable que "1px", donc -> "outline: thin solid;"
2. La fonction "round" force le navigateur à arrondir la valeur. Ici on peut forcer à arrondir au pixel inférieur lorsque la valeur calculée fait plus de 1px -> "outline: round(down,1px,1px) solid;"
Modifié par Raphael (10 Jun 2025 - 10:28)

Bonjour Raphaël,

Très intéressant, merci.

Je ferai les tests en fin de journée.

Cela dit mon moniteur Full HD (seulement) rend bien le filet de 1px.
Cela passe en 2px là où il y a superposition de deux filets, cela ressemble à un problème d'interprétation du navigateur.

Autrement, avec auto-fill existe-t-il un équivalent de width: auto pour le container ?

J'ai l'impression que non et donc que sans width explicite pour le container les éléments s'alignent verticalement sur une seule colonne ?

boteha_2 a écrit :
Autrement, avec auto-fill existe-t-il un équivalent de width: auto pour le container ?
J'ai l'impression que non et donc que sans width explicite pour le container les éléments s'alignent verticalement sur une seule colonne ?

Je ne suis pas sûr de comprendre la question.

Dans le codepen qui sert de référence à la discussion (celui de Gcyrillus), il n'y a justement pas de `width` explicite sur le conteneur (`ul`). La largeur est donc bien de `auto`.

De manière générale, je peux te confirmer qu'il n'est pas nécessaire d'indiquer une `width` à un conteneur d'une grille en auto-fill ou auto-fit (valeur que je préfère personnellement).

boteha_2 a écrit :
Cela dit mon moniteur Full HD (seulement) rend bien le filet de 1px.

Que te disent les devtools navigateur en valeur calculée ?
Modifié par Raphael (10 Jun 2025 - 12:20)

hello,

pour infos: j'ai fait une mise à jour sur le codepen avec la possibilité de passé en paramètre l'épaisseur . Il y a 2 listes , donc 2 valeurs qui peuvent être comparées.

https://codepen.io/gc-nomade/pen/bNdoXRg pour jouer avec

Pas de chance pour moi, aucun de mes écrans (sur pc/mobile) ne reproduisent ton défaut.

cdt

Raphel a écrit :
Il est tout à fait possible que cela dépende de ta résolution d'écran (pixel-ratio) et que la valeur "1px" soit rendue différemment. Vérifie dans l'inspecteur de ton navigateur quelle est la valeur calculée de "outline-width" : certaines valeurs sont résolues en "sub-pixels".

Je vais dans l'inpecteur de Firefox ou de Chrome, je filtre par "outline" et je ne trouve aucune valeur...

Codepen de Gcyrillus, chez moi l'affichage est correct en 10px.
Il est aussi correct en 1px mais si je zoome cela commence à débloquer un peu, une bordure passe en 2px, puis repasse en 1px alors qu'une autre se met en 2px.
Si je passe en 2px c'est beaucoup mieux.

Sur un autre codepen je tente round(down,1px,1px).
Ce n'est pas mieux que 1px.
Mais mieux que thin que j'ai essayé avant.

Bon je pense qu'il y a un bug pour la gestion des filets de 1px.
Pas de bug si 2px ou plus.
Peut-être dû à Windows 10 ou à mes moniteurs Full HD.
J'ai essayé sur deux PC dont un récent.

Raphael a écrit :
De manière générale, je peux te confirmer qu'il n'est pas nécessaire d'indiquer une `width` à un conteneur d'une grille en auto-fill ou auto-fit (valeur que je préfère personnellement).

D'accord, je pense que mon problème provient du parent.

Quelques images :


Bon si zoom 100 % :

Modifié par boteha_2 (10 Jun 2025 - 17:26)

Salut,

si c'est juste une "simple" grid tu dois pouvoir magouiller ( ) avec du border left sur tous les li et mettre un border right seulement sur le dernier li, et même principe du top sur toutes les lignes et un bottom seulement sur la dernière ce qui évite les doublons de bordure.

Mathieuu a écrit :
si c'est juste une "simple" grid tu dois pouvoir magouiller ( Smiley sweatdrop ) avec du border left sur tous les li et mettre un border right seulement sur le dernier li, et même principe du top sur toutes les lignes et un bottom seulement sur la dernière ce qui évite les doublons de bordure.

Je ne sais pas combien d'éléments sont affichés.
Ta solution fonctionne mais avec des container queries, comme déjà présenté.

boteha_2 a écrit :
Je vais dans l'inpecteur de Firefox ou de Chrome, je filtre par "outline" et je ne trouve aucune valeur...

boteha_2 a écrit :
Bon je pense qu'il y a un bug pour la gestion des filets de 1px.
Pas de bug si 2px ou plus.
Peut-être dû à Windows 10 ou à mes moniteurs Full HD.
J'ai essayé sur deux PC dont un récent.

Je reste persuadé qu'il s'agit d'un souci lié à un arrondi sans doute en raison de ton niveau de zoom.


1. Pourrais-tu nous dire quel est le pixel-ratio que te donne https://mydevice.alsacreations.com/ ?
2. Quel est ton niveau de zoom par défaut sur ton Windows 10 ? https://www.windowscentral.com/how-set-custom-display-scaling-setting-windows-10#change_display_scaling_default_settings_windows10

Bonjour Raphaël,

Merci de ton suivi.

J'ai 3 écrans 27 pouces full HD en bureau étendu.

Pour le pixel ratio, voir capture ci-dessous.
Le résultat est le même pour chacun de mes écrans.

Pour le niveau de zoom, chaque, écran est à zoom 100 %, j'ai vérifié.


Modifié par boteha_2 (11 Jun 2025 - 19:29)

Il y a deux propriétés (pas encore reconnues par les navigateurs) dans le module "Gap Decoration" qui pourront t'aider. Bon c'est pas demain la veille qu'elles seront reconnues mais pour information, il s'agit de :
row-rule-width
column-rule-with

A titre d'info.
Modifié par Alainpre (13 Jun 2025 - 08:11)

Alainpre a écrit :
Il y a deux propriétés (pas encore reconnues par les navigateurs) dans le module "Gap Decoration" qui pourront t'aider. Bon c'est pas demain la veille qu'elles seront reconnues mais pour information, il s'agit de :
row-rule-width
column-rule-with

A titre d'info.

C'est intéressant ce que tu dis, car ces deux propriétés sont "anciennes" et déjà largement supportées par tous les navigateurs quand elles sont appliquées dans les multicolonnes CSS : https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-width

Par contre d'après ta source, elles pourraient être également applicables dans Grid et Flexbox. Et on dirait que ta source a raison : https://www.w3.org/TR/css-gaps-1/#column-row-rule-width

Cependant, dans tous les cas, je ne suis pas sûr que ça règle le problème puisque ça n'agira qu'entre les colonnes et les rangées.

Oui ce sont d'anciennes propriétés qui seront été étendues aux grilles et aux flex. On peut cumuler cela avec une bordure sur le conteneur.