FRESH

Hacker News

Home

New layouts with CSS Subgrid

306 points by joshwcomeau

by webstrand

2 subcomments

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.

by dsego

0 subcomment

The pricing UI example is exactly the type of thing I had to build a few years ago. Deceptively simple, two tables for comparison, but the rows need to line up.
Impossible without subgrid, either you need to have fixed heights or calculate heights with JS, but neither is elegant or simple, especially if you have react components and adhere to modular design, and you need to have those components agree on sizing.

by echelon

1 subcomments

I am continually in awe of Josh's blog posts, clarity of writing, sense of design, and fun interactive website.
You're killing it, Josh. Thank you for writing and teaching us.

by Nathanba

1 subcomments

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

by N_Lens

5 subcomments

Have we wrapped all the way around to <table> layouts again?

by buovjaga

1 subcomments

Random grid gotcha that drove me crazy some time ago: due to browser bugs we can't use <img> 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 '<img> grid item with percentage height, "width: auto", "grid-template-columns: auto", and no track stretching makes column to have the same width of the original image's width' (although someone there claims it works in Chromium).

by flowerthoughts

1 subcomments

This sounds useful, but the example of the feature rows reminds me how sad it is that CSS sometimes requires adding information about the document structure to make a layout work. In this case the number of rows.

by lofaszvanitt

5 subcomments

When I see the grid syntax, I just wanna jump off a cliff. Who created this abomination and why? We need trials to check whether these were the output of humans or some synthetics pretending to be humans.

by Surac

2 subcomments

So we are back to grids after all the years put into css? We had this with html many years ago

by rckt

3 subcomments

I never found it comfortable to work with grids. The syntax and layout just feel off. Flexbox is a much more flexible and easy thing to work with.

by another_twist

0 subcomment

Sounds like a source of bugs. Basically this means the grids can be nested to no end. It breaks locality in that now I have to understand what the parent would do before I can make sense of a component.

by herpdyderp

1 subcomments

Why do you put styles in the code playground HTML and CSS file? I was staring at the first subgrid example’s CSS file for ages trying to figure how anything special was applied to the ul element.

by HenriTEL

0 subcomment

Ah yes, a new css concept! I love this kind of article that invariably contains this kind of statement:
> This is mind-bending stuff, but it becomes intuitive with a bit of practice.
The problem is not the language, it's just that you did not spend enough time to learn it the proper way.

by scotty79

0 subcomment

Have we reached the point where we can fully simulate quirks mode table behavior?

by kumarvvr

2 subcomments

How is this different to, and better than using nested grids?

by kafkaesque

0 subcomment

Am I the only one who sees "content boxes"/divs with content displayed in different widths as poor design? At least in the example given, I would think you would want the image and its associated content box to be the same size for all four and not have its content vary in width based on how much content it has.
But in terms of functionality, I'm sure there are plenty applications for this!

by t1234s

3 subcomments

is grid intended to replace flex at some point or live side by side

by hollowturtle

3 subcomments

From the example:
```
  .grid {
    display: grid;
    grid-template-columns: 35% 1fr 1fr 1fr;
  }

  .grid header {
    grid-row: 1 / 3;
  }

  .grid ul {
    grid-row: span 2;
    grid-column: span 3;
    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
  }
```
I swear you that I had less hard time reading x86 assembly code or even c++ templates. I mean what the hell? Then if you go look at another example:
> @media (max-width: 32rem)
I know what rem means, I just don't know what the hell MAY mean, that alone in a big project will make you hate your job as sometimes it's more easier predicting what the response of an LLM may be than what styling an element will have on a live page
[Edit] I'm not confusing rem with em, em are even worse, but still hard predicting what a rem might be, before arguing we shouldn't I'd like to stress out we should once it's used like that "@media (max-width: 32rem)"
[Edit2] Instead of just downvoting why don't you reply with your counter arguments? I really am interested in hearing what you have to say