Live data from Hacker News

New layouts with CSS Subgrid

joshwcomeau.com

101–104 of 104 posts

Re: New layouts with CSS Subgrid

#101

Random grid gotcha that drove me crazy some time ago: due to browser bugs we can't use elements with percentage widths or heights as grid items. The grid cell dimensions get blown out to the ones of the original image. Seen in both Firefox and Chromium. Relevant FF bug is probably https://bugzilla.mozilla.org/show_bug.cgi?id=1857365 ' grid item with percentage height, "width: auto", "grid-template-columns: auto", and…

so if the img has a specific size set in width and height attributes or via css, and that size is not percentile or auto, the problem doesn't exist? I'm just confused by the "original image's width".

The Firefox bug report has an image that illustrates the issue: https://bugzilla.mozilla.org/show_bug.cgi?id=1857365#c0

Re: New layouts with CSS Subgrid

#103

Earlier quoted context omitted.

Yeah this is a good callout. My understanding is that display: contents is not meant to impact the accessibility tree but there is a long and ongoing history of browser bugs that make me not want to use it for elements that have an accessible role

From my testing, as far as I've been able to tell it no longer has any impact on accessibility. The element itself does not appear in the tree, this makes sense display:contents is non-interactive. But all of the children correctly appear in the accessibility tree as if they did not have that shared parent element. But I am by no means an expert at operating screen readers, do you know of any specific issues with it?

The issue is if you do want the element to appear in the tree. If the element has semantic meaning it can mess things up.

Adrian Roselli is an accessibility expert who has done extensive testing and written up his findings: https://adrianroselli.com/2022/07/its-mid-2022-and-browsers-...

Re: New layouts with CSS Subgrid

#104

Earlier quoted context omitted.

I simply ignore it and use flexbox without any issues.

I think Flexbox is so much worse than CSS Grid. If Flexbox makes sense to you, it I don't think it should be that hard to learn CSS Grid, you'll already have many of the properties you need to understood learned. Grid just works properly in 2 whole dimensions where Flexbox sort of gives up after 1 and a half dimensions.

I know grid. It doesn’t do what I want, so I don’t generally use it.
Post reply on HN