Avoid Grid Borders from doubling
Lots of websites have similar layouts to this but i can't figure out what their "trick" is to stop borders from doubling on sides (especially on layouts where we dont know how many items there will be). The closest i got is with tailwind css and divide width utility classes (https://tailwindcss.com/docs/divide-width) but still had to add my custom css to select the first child and last to add some more borders to them.
If anyone could give me some heads up on how to do it i'd greatly appreciate it. Tried looking at the website source code but no luck (https://www.kickgame.com/products/air-jordan-4-retro-midnight-navy-dh6927-140)
Divide Width - Tailwind CSS
Utilities for controlling the border width between elements.
Kick Game
Air Jordan 4 Retro 'Midnight Navy'
The Air Jordan 4 Retro ‘Midnight Navy’ dresses the legacy silhouette in the same colour blocking used on the OG ‘Fire Red’ colorway. The upper is constructed from white leather with black support wings, a matching black heel tab with embossed Jumpman branding, and navy molded eyelets. A second Jumpman icon adorns the w
Solution:Jump to solution
Fixed it. Apparently there is a property called outline (https://developer.mozilla.org/en-US/docs/Web/CSS/outline)
Here is a link for anyone interested: https://codepen.io/spaceyyn/pen/xxBzKem...
MDN Web Docs
outline - CSS: Cascading Style Sheets | MDN
The outline CSS shorthand property sets most of the outline properties in a single declaration.
1 Reply
Solution
Fixed it. Apparently there is a property called outline (https://developer.mozilla.org/en-US/docs/Web/CSS/outline)
Here is a link for anyone interested: https://codepen.io/spaceyyn/pen/xxBzKem
MDN Web Docs
outline - CSS: Cascading Style Sheets | MDN
The outline CSS shorthand property sets most of the outline properties in a single declaration.