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

91–100 of 104 posts

Re: New layouts with CSS Subgrid

#91

Post by WorldMaker »

herpdyderp wrote: post #83
lofaszvanitt wrote: post #27

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.

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.

Re: New layouts with CSS Subgrid

#92

Post by WorldMaker »

moron4hire wrote: post #73
Akronymus wrote: post #65

Earlier quoted context omitted.

> Grid doesn't have it's own element like table does, so you have to use css to apply that display to a div. Well, OOTB, yeah. I personally like to make use of custom html elements a lot of the time for such things. Such as etc, and apply css styles to those, rather than putting in classes onto divs. Feels a lot more ergonomic to me. Also gives more meaningful markup in the html. (and forces me to name the actual tag…

One of the many things I hate about React: can't easily create custom elements that truly exist in the DOM so I can style them in CSS.

Recent React round-trips custom elements better now. You just have to remember the standard's rule that all custom elements need to be named with dash (-) inside them.

Re: New layouts with CSS Subgrid

#93

Post by joestrouth1 »

hollowturtle wrote: post #89
joestrouth1 wrote: post #88

Earlier quoted context omitted.

Put me on a C++/asm project and I'd have a hard time making heads or tails of it. So what? Your comment comes off as very angry without any meaningful critique of the article's central topic other than you had a hard time understanding it. 1rem is equal to the same number of pixels anywhere on a given page and, generally speaking, across pages on a given site. If you don't know what the value is it only takes a minut…

> 1rem is equal to the same number of pixels anywhere on a given page and, generally speaking, across pages on a given site. That's not true, first of all the root font size might not be immediate to query and find out what it is, second it might change because of variables on the root or base font size might be percentage/rem based itself not necessarily in pixels and finally setting it in pixels doesn't take into c…

My point was that there is only one root font size on a given page and it's trivial to find out what that is by looking in dev tools. It does not matter if it was set by the browser's user-agent stylesheet or an authored stylesheet or what units it was set in. You can simply look up its computed value.

What use case is that not sufficient for? What kind of nightmare page are you styling where code you don't control is dynamically changing the root font size? Why do you need its exact computed value at all? The whole point of REMs is to style based on relative proportions to the text size e.g. when text is size X, buttons should have x padding on top/bottom and 2x on the sides. If the user sets their preferred font size to another value I do not care.

Re: New layouts with CSS Subgrid

#94

Post by moron4hire »

sussmannbaka wrote: post #74
pacifika wrote: post #53

Earlier quoted context omitted.

HTML spec couldn’t just have added a grid element?

I think CSS grid is too powerful to be represented in markup. I rotated the idea in my head for a bit but the most I could come up was elements that covered a small subset of CSS grid and which completely lost the entire appeal of being able to handle tracks dynamically.

This is a classic problem I identify across a wide variety of types of software. I call it "forcing a graph into a tree" and it comes up any time you have something that must be evaluated across multiple axises but the earliest assumptions (now invalidated) about the data restricted it to a tree, or the most really available tools to process it is with tree-like data structures and algorithms.

HTML is a tree. It's really great at trees. But defining a grid layout sometimes requires organizing data by both the rows and the columns. That can't fit into a tree.

I think a lot of people's complaints that "CSS is too complex, why can't we just do this in HTML" would go away if they could understand that CSS--being a rules-based system--can process the graph, but HTML can only ever define a tree. There are things that will just never work in just HTML.

This gets hard because trees are easy for people to understand. We have lots of examples of them: file systems (if you ignore symlinks). Family trees (if you ignore inbreeding). Tree of life taxonomies (if you ignore more than basic undergrad biology). You can probably guess by my caveats how much I feel it is important to study graphs. But graphs are "scary Computer Science" stuff to a lot of people, so they don't take the time to learn.

Re: New layouts with CSS Subgrid

#95

Post by merb »

maqnius wrote: post #56
pacifika wrote: post #53

Earlier quoted context omitted.

HTML spec couldn’t just have added a grid element?

CSS grids are for presentation, HTML is for semantics. Ideally they are separated. That's why the use of tag is deprecated.

As far as I know and is not deprecated at all. It’s just not recommended for 95% of the use cases.

Re: New layouts with CSS Subgrid

#96

Post by hollowturtle »

WorldMaker wrote: post #90
hollowturtle wrote: post #60

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…

Grid is a DSL certainly, but it's a very useful DSL to learn. I'd even argue that people skip Flexbox or forget everything they (think they) know about Flexbox and just learn CSS Grid. One of the first callouts in the article is a suggestion to read the same site's interactive guide to CSS Grid if you aren't familiar with it: https://www.joshwcomeau.com/css/interactive-guide-to-grid/ > I'm not confusing rem with em,…

thanks for the lesson, not needed because i know how to do a multiplication, but oh well people need to flex their domain knowledge. You're missing the whole point: drid dsl is overengineered and convoluted with browser behaving differently on some cases. Css is a disease

Re: New layouts with CSS Subgrid

#97

Post by hollowturtle »

joestrouth1 wrote: post #93
hollowturtle wrote: post #89

Earlier quoted context omitted.

> 1rem is equal to the same number of pixels anywhere on a given page and, generally speaking, across pages on a given site. That's not true, first of all the root font size might not be immediate to query and find out what it is, second it might change because of variables on the root or base font size might be percentage/rem based itself not necessarily in pixels and finally setting it in pixels doesn't take into c…

My point was that there is only one root font size on a given page and it's trivial to find out what that is by looking in dev tools. It does not matter if it was set by the browser's user-agent stylesheet or an authored stylesheet or what units it was set in. You can simply look up its computed value. What use case is that not sufficient for? What kind of nightmare page are you styling where code you don't control i…

I use rems I don't love them but it's less worse unit we have. My point was more on grid being convoluted and media queries with arbitrary values like media (max-width: 32rem)

Re: New layouts with CSS Subgrid

#98

Post by itishappy »

merb wrote: post #95
maqnius wrote: post #56

Earlier quoted context omitted.

CSS grids are for presentation, HTML is for semantics. Ideally they are separated. That's why the use of tag is deprecated.

As far as I know and is not deprecated at all. It’s just not recommended for 95% of the use cases.

They're not quite deprecated, but they're also not quite not deprecated at all:

> Historically, the element was meant to make text boldface. Styling information has been deprecated since HTML4, so the meaning of the element has been changed.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...

Re: New layouts with CSS Subgrid

#99

Post by phatskat »

alwillis wrote: post #32
code_biologist wrote: post #29

Earlier quoted context omitted.

There's plenty of overlap, but they solve different problems: flexbox when the content should control element sizing/fit, grid when the container should control element sizing/fit.

Another way to think about it: flexbox is for alignment of boxes in one dimension: horizontally or vertically. CSS Grid is for two dimensional layout of rows and columns. Back in the day, developers wanted page layout instead of the hacks on top of hacks with table-based layouts, floats and positioning to create layouts. We’ve had CSS Grid designed for page layout on the web, in all browsers since 2017; as of 2022, o…

I think the grid syntax is really off-putting - it’s one of the few places of “typical” CSS I tend to avoid unless something really calls for it. In my experience, it feels like the people most familiar with grid display, the syntax, and using it, are more on the design side than the programming side - most of my frontend peers who use it tend to misuse it when flex would work fine and be less rigid for their goals

Re: New layouts with CSS Subgrid

#100

Post by ambigious7777 »

herpdyderp wrote: post #81

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.

it's because the CSS file is for styles not important to the example
Post reply on HN