Uneven gaps in Grid
I am trying to create a simple grid. I am using
gap: 1px and background-color:black. This doesn't end up rendering as 1 pixel and some lines are thinner/thicker. I'm also seeing this change across multiple screens/resolutions. How can I fix this?
12 Replies
Ah, looks to be related to my device pixel ratio (that I have set in Windows), which was 150%. https://stackoverflow.com/questions/29379559/css-border-width1px-doesnt-give-me-equally-thin-borders
I'm still trying to figure out if there's a general solution.
i'd probably use a background-image with a gradient for that type of effect
here's an example
Thank you.
Just want to take an an opportunity to say thank you for all your videos on YT.
One of the issues is that I'm going to fill content in each box.
e.g. Imagine tic tac toe, or sudoku
Oh. so you'll have a div or osmething each cell then, which has content in it?
Instead of gap, could you just give each one of them a border?
Can do, but I wanted to try and not get doubled up borders
Maybe https://stackoverflow.com/questions/43686698/collapsing-borders-using-css-grid ?
Not sure if
outline will stop the weird 1px behaviour though.. trying now.There's probably a better solution to this... but this works 🤷
https://codepen.io/kevinpowell/pen/jOQRzBY?editors=1100
I'm about to logoff for the night, but I'll check back if you made any progress tomorrow 😄
thank you!
So, this is related to these topics:
- sub-pixel rendering
- sub-pixel artifacts
There doesn't appear to be a clear solution (at least for now).
It seems like how browsers resolve some of these things aren't well defined by the CSS specification
e.g. Do I round up, down, or mix stuff?
My guess is, in Chrome there's a "mixed" approach.
Even though my grid's children has a static (pixel) width/height and the
gap is also a static pixel dimension (1px),
it must be prioritizing the width/height of the children elements.
This means that any rounding/mixing ends up in the "gaps" and results in having an inconsistent border width.
Where as, when you use border, I presume that it prioritizes making sure that the border width is consistent
tldr: Don't use gap in grid to try and make a border. It might even look okay on your screen (when pixel ratio/density is 1:1), but it may not look right on other people's screens.
(For the record, I went down the path of using gap to create a border because I saw it as an accepted answer on StackOverflow)The top border is full page width though. Maybe display: inline-grid?
Ah, yeah, inline-grid would fix that 🙂
I updated the pen with a second option with a
background-image instead, and going heavy on custom props so it's easy to update. Because it's a background-iamge, it does need a tiny bit of padding to make sure we see the line on the right and bottom...
The nice thing with the background image is that it's independent from having children in there, so you could use a gap still, and not run into any issues.... other than that, not sure if it really has a benefit or not 🤷
https://codepen.io/kevinpowell/pen/jOQRzBY?editors=1100