Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

New layouts with CSS Subgrid

joshwcomeau.com

Post reply on HN
Print view View original

1–10 of 104 posts

Re: New layouts with CSS Subgrid

#2

Post by Nathanba »

Isn't this also what container queries solve better? I guess maybe you want to be sure that the whole grid remains consistent instead of relying on individual containers possibly making their own decisions. So many new features to investigate, so little time :) https://codepen.io/web-dot-dev/pen/rNrbPQw

Re: New layouts with CSS Subgrid

#3

Post by webstrand »

Subgrid is really cool, but I want to note that for the first trivial example, you could make the children participate in grid layout by doing

    ul { display: contents }
it's more efficient, if you don't need subgrid features, but still want the nested element structure for other reasons.

Re: New layouts with CSS Subgrid

#4

Post by Izkata »

webstrand wrote: post #3

Subgrid is really cool, but I want to note that for the first trivial example, you could make the children participate in grid layout by doing ul { display: contents } it's more efficient, if you don't need subgrid features, but still want the nested element structure for other reasons.

And on the second one, you could use any other unit instead of fr for the image to set its width consistently, then fr on the text to have it use up whatever remains.

Re: New layouts with CSS Subgrid

#5

Post by webstrand »

Nathanba wrote: post #2

Isn't this also what container queries solve better? I guess maybe you want to be sure that the whole grid remains consistent instead of relying on individual containers possibly making their own decisions. So many new features to investigate, so little time :) https://codepen.io/web-dot-dev/pen/rNrbPQw

Container queries don't solve the responsive to sibling sizes issue that grid/flex can solve. And frustratingly container queries force your container element to be a new stacking context, unlike flex/grid.

I am sad that using containers and subgrids together doesn't work. Being able to query the size of the subgrid from a child element would be super powerful.

Re: New layouts with CSS Subgrid

#8

Post by bradly »

Izkata wrote: post #4
webstrand wrote: post #3

Subgrid is really cool, but I want to note that for the first trivial example, you could make the children participate in grid layout by doing ul { display: contents } it's more efficient, if you don't need subgrid features, but still want the nested element structure for other reasons.

And on the second one, you could use any other unit instead of fr for the image to set its width consistently, then fr on the text to have it use up whatever remains.

I also wasn't understanding the value looking at the first two examples, but the pricing packages example I do think I would struggle to implement in a clean way using traditional css.
Post reply on HN