Zak Comments - Answer Overflow

Zak

•Created by Zak on 8/8/2023 in #front-end

Uneven gaps in Grid

(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)

28 replies

KPCKevin Powell - Community

•Created by Zak on 8/8/2023 in #front-end

Uneven gaps in Grid

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.

28 replies

KPCKevin Powell - Community

•Created by Zak on 8/8/2023 in #front-end

Uneven gaps in Grid

Where as, when you use border, I presume that it prioritizes making sure that the border width is consistent

28 replies

KPCKevin Powell - Community

•Created by Zak on 8/8/2023 in #front-end

Uneven gaps in Grid

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.

28 replies

KPCKevin Powell - Community

•Created by Zak on 8/8/2023 in #front-end

Uneven gaps in Grid

e.g. Do I round up, down, or mix stuff?

28 replies

KPCKevin Powell - Community

•Created by Zak on 8/8/2023 in #front-end

Uneven gaps in Grid

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

28 replies

KPCKevin Powell - Community

•Created by Zak on 8/8/2023 in #front-end

Uneven gaps in Grid

So, this is related to these topics: - sub-pixel rendering - sub-pixel artifacts

28 replies

KPCKevin Powell - Community

•Created by Zak on 8/8/2023 in #front-end

Uneven gaps in Grid

thank you!

28 replies

KPCKevin Powell - Community