When will CSS Grid Lanes arrive? | Hacker News Reader

When will CSS Grid Lanes arrive?

webkit.org

50 pointsfeross27 comments

Here's the famous 2004 article on why tables are bad.[1] Cool people do everything with break and div. The CSS crowd then spent two decades re-inventing tables.

[1] https://www.hotdesign.com/seybold/everything.html

Tables are not responsive. They don't adjust to changing screen sizes. That was okay, maybe, when everyone was only on desktop/laptops but changed once mobile and tablets appeared.

What? Tables are responsive, they auto adjust widths or columns, you can control which are fixed width and which are fluid.

The person I was responding do linked to an article about tables for layout, not tables for data

Yes. You can specify width as fixed, percentage, or leave it blank.

Here's an old all-tables site of mine.[1] Try resizing the window. Works fine. It won't narrow down to mobile dimensions well, though.

[1] https://downside.com/news.html

I definitely want to see that state+population table in mobile as a single element that I can just scroll to not 3 elements fighting for horizontal space thank you very much.

The left side of the first example picture looks to me like four columns laid out using a vertical flexbox each. In fact, it looks like the very example that I saw people using saying "Look how the flexbox layout on the left doesn't line up the text boxes, but on the right the text boxes are all neatly aligned, isn't that nicer?"

I realize that the difference is that the items are laid out horizontally, i.e. photos 1-2-3-4 are all across the top, whereas with vertical flexboxes items 1-2-3-4 would end up in the first column (or you'd have to rearrange your divs taking the flexbox layout into account, which is often impractical).

But the gain from CSS Grid Lanes is not immediately obvious from looking at the first photo, as it's so very similar to the old "left is flexbox, right is grid" examples from when Grid was new.

Looking at the comparison image between CSS grid lanes and CSS grid 1, the grid lanes example looks....horrifying. It looks like pinterest cancer. It makes the page look like a ragged assortment of random shit. Scannability is grossly impaired. How are you supposed to approach this content? What objective does this mess of a presentation accomplish? What kind of information lends itself to this kind of "masonry-style waterfall layout"?

There is a use case for grid lane and pinterest is a good example: random images where a user isn't looking for a particular image but is just browsing. That's also why the example looks bad, is because it prominently includes text, which isn't part of the use case. Scannability is terrible, this layout has a very limited use case. It really is only for browsing random images, not even searching for a specific image and definitely not concerned with text.

A feature I want, that appearenly was attempted by some browsers but never stanardized. I want to be able to make a table that can responsively fill out columns.

    +-------+------------+  +-------+------------+  +-------+------------+
    | state | population |  | state | population |  | state | population |
    +=======+============+  +=======+============+  +=======+============+  
    |  AL   | ....       |  |  DE   | ....       |  | MI    | ....       |
    |  AK   | ....       |  |  FL   | .....      |  | MN    | ....       |
    |       |            |  |       |            |  |       |            |

I need to put the heading at the top. It needs to make the heading sticky. As it is those, AFAIK there is no "easy" solution for this

Does subgrid work for this layout?

I wonder when we'll get hexagonal lanes, triangular and Penrose tiling. Rest assured, there will be practically infinite set of features designers would invent. Language designers would do good takubg into account Scheme idea: language is good when there is nothing to remove.

But css is not a “programming language” it’s a negotiation between browser engineers (who need to keep things fast and responsive) and web devs (who need to implement a fashionable design that is still distinguising for their brand)

I think you don’t need new CSS features to put AI generated content in jumbotron.

I dislike the idea that CSS should be made more complex. Everyone is doing the same template with Jumbotron anyway.

Pick the colors, pick imagery and name for the brand - doing some magic with CSS will only piss off people.

Cookie cutter design is what I like. I can compare the companies when they all have the same template for a website.

> Cookie cutter design is what I like. I can compare the companies when they all have the same template for a website.

Any reference?

Also I do feel like some people prefer animations. Maybe not the Hackernews crowd itself per se. But I think that having two options (or heck three the third one being really just pure html just text no styling maybe some simple markdown) is something good in my opinion.

Honestly I do feel like 1-2 animations are okay with a website but the award winning websites really over spam it in my opinion

I think maybe the amount of animations in https://css-tricks.com might be nice given that those guys/website teaches other people about animation themselves and have only 1 maybe 2 animations that I can observe interacting with their website and I do feel like that's for good reason (they don't want animations to be too distracting)

I personally don't know, I personally have never built any such websites but recently wanted to and I was looking at gsap tuturials on today & I do feel like one of the frustrations I feel is that these animations don't respect the browser sometimes to have animations (Scroll animations being the first one) but I even watched some designers talk about how much important scroll animations are (them betting that every award winning website has scroll animations)

Even https://ycombinator.com has a lots of animations & Css features & people on HN did love it from what I could tell. So to me, it does feel as if there is no one size fits all.

That’s a very engineer thing to say. Most people are definitely different from you, and that’s why CSS is increasing in scope.

Also, if everyone is implementing the same Jumbotron design again anyway, why not standardise that and support it right away instead? That’s how we got a bunch of features recently, like dialogs, popovers, or page transitions. And it’s for the better, I think.

>And it’s for the better, I think

A strong reason to use llms today is accessing plain text information without needing to interface with someone else stupid css. You really think the general sentiment around css is: yay things are improving?

another strong reason to use llms: no needing to write css anymore.

I don’t care about the general sentiment when I state my personal opinion. There are definitely people who like CSS and the direction it moves to.

And that being said: the ability to express something in a single CSS directive as opposed to a special incantation in JavaScript is an objective improvement, especially with LLMs.

fair, you pointed well it was you opinion.

general sentiment is quite relevant when discussing standards but maybe it was a mistake to reply to your comment and not address this point in parent

>it’s a negotiation between browser engineers

curious how this works, huh.

seems like the same institutions starving to push browser updates are also authoring standards.

>who need to keep things fast and responsive reality says otherwise. but they definitely need to push updates.

IIRC, there are no directions in CSS other than the block and inline axes.

I think the plan going forward is to allow people to implement their own CSS layout primitives using Houdini, but I haven't kept track of how it has evolved or progressed.

It hasn't.

The more features they add, the less likely a competitor can arise without investing a billion man-hours.

This seems kind of redundant. I would just use flexbox for something like this. Grid is already an extremely rare item for me. I only ever use it when I need to control the overall layout for an app that has to work on a wide range of viewports. I'd never use grid just because it can do clever brickwork.

You very much cannot use flexbox for this. The whole point of these gridlanes is that not only can you have elements that automatically move across lanes when resizing the container, you can also have elements spanning multiple gridlanes and also fix the positions of elements in the grid, something wholly impossible in pure CSS flexbox. They link to the article[1] that even describes all the use cases this covers right below the first image.

Grid covers a lot of very subtle use cases that have historically required hacks like a list of select options where some can have icons on the left and some don't. You just need a subgrid that will automatically position every element in the select correctly to align them, regardless of whether there is an icon or not within the element in all select items. Previously you'd have to add a fixed width padding to the left and check if all the select items had icons. It also correctly scales the width and height of a row of items like cards where you want to ensure the alignment of headers, content, image etc depending on if that stuff is in there or not. You can have text missing and the card will still take up that size because your subgrid has defined it so. All of this needed JS, complex CSS hacks and so on. These aren't obscure features these are commonly used layouts that required a lot of time and effort to make it look nice.

[1] https://webkit.org/blog/17660/introducing-css-grid-lanes/

Did we really need that? I wonder if people recognize how bad the "standard committee" is and that we are held back by them. I can't hold in my mind how many features the web is missing that should be prioritized, I think I'll make a list and start a blog. The web deserve better

Reply on news.ycombinator.com