28217 sujets

CSS et mise en forme, CSS3

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 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...
Modérateur
Tu devrais vraiment creusé la piste du outline et faire différents essai (avec des chemins valides pour les images ou pas d'images) Smiley cligne

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.
Modérateur
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 : upload/1749496738-2857-gridbordercollapse.jpg

cdt
Bonsoir gcyrillus,

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

upload/1749497021-58253-2025-06-09212205-window.png upload/1749497042-58253-2025-06-09212122-window.png

Idem avec Chrome.

L'effet indésirable est net, non ?
Modifié par boteha_2 (09 Jun 2025 - 21:26)
Administrateur
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 ?
Administrateur
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)
Modérateur
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
Prévenir un modérateur
Répondre au sujet
Aller à