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

Faster Layouts with CSS Grid and Subgrid

hacks.mozilla.org

Post reply on HN
Print view View original

31–40 of 86 posts

Re: Faster Layouts with CSS Grid and Subgrid

#31

Post by [deleted] »

maxharris wrote: post #22
maxharris wrote: post #20

So I'm working on a replacement for HTML and CSS. Right now it's written in JavaScript and it renders to canvas. The reason I'm posting here is because you can write your own layout components in my system. So if you have a new idea, instead of waiting years for it to get standardized and supported by the browsers, you can just roll your own idea and run it in anywhere without any fuss. (Flexbox took years to do some…

If you're the ones that downvoted me, can you please explain why? I'm dedicating my life full-time to working on this, and I don't understand why this would offend you. If the trouble is about accessibility, please read my README! I care about that, too, and I would love help!

[deleted]

Re: Faster Layouts with CSS Grid and Subgrid

#32

Post by btbuildem »

arminiusreturns wrote: post #26

All I want is a sticky, permanent header and footer and the rest of the page for text. (without the text going behind the footer/header) Can grid do this? I really don't like using javascript frameworks, I'm trying hard to keep my stuff pure html5/css3.

  .foo {
    display: grid;
    grid-template-rows: 10% 80% 10%;
    height: 100vh;
  }

  
    header
    text
    footer

Re: Faster Layouts with CSS Grid and Subgrid

#33

Post by liminal »

fimdomeio wrote: post #6

Please take into account current support for subgrid [1]. My first time redoing quite complex checkout table with mobile support was a nightmare. I only realised I needed something more halfway along the process. Found out it was subgrid I was looking for and they figuring out there was no current browser support. But using a oneliner like `grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));` too almost ful…

I've gotten a lot of the benefit of subgrid by using display:contents

Re: Faster Layouts with CSS Grid and Subgrid

#34

Post by techntoke »

maxharris wrote: post #20

So I'm working on a replacement for HTML and CSS. Right now it's written in JavaScript and it renders to canvas. The reason I'm posting here is because you can write your own layout components in my system. So if you have a new idea, instead of waiting years for it to get standardized and supported by the browsers, you can just roll your own idea and run it in anywhere without any fuss. (Flexbox took years to do some…

JavaScript is like the worst alternative to HTML and CSS when it comes to performance, dependencies and accessibility.

Re: Faster Layouts with CSS Grid and Subgrid

#35

Post by tux1968 »

btbuildem wrote: post #32
arminiusreturns wrote: post #26

All I want is a sticky, permanent header and footer and the rest of the page for text. (without the text going behind the footer/header) Can grid do this? I really don't like using javascript frameworks, I'm trying hard to keep my stuff pure html5/css3.

.foo { display: grid; grid-template-rows: 10% 80% 10%; height: 100vh; } header text footer

Don't think that has the desired effect; at least if I understood the request properly.

The text area won't get a scrollbar when more text is added to fill the view area. It seems in this case you would have to manually ensure that the text you gave could fit in 80% of the screen, or bad things happen visually. Also, the header and footer aren't permanent, they are affected by the entire-page scrollbar.

Re: Faster Layouts with CSS Grid and Subgrid

#36

Post by karlshea »

miiiiiike wrote: post #27
The_rationalist wrote: post #21

Earlier quoted context omitted.

Sadly, I haven't been able to find any benchmarck comparing grid vs flexbox, despite layout being a common bottleneck.

They have different use cases. The rule of thumb is to use Flexbox if you're laying out content along the X or Y axis and Grid if you need to lay it out over both the X and Y axes.

This is a very good rule of thumb.

Grid is great for the layout of the whole page (header/content/sidebar/footer) or specific gridded containers.

Flexbox is great for everything else, and specifically what you said about in one dimension, like form label/input or a repeating set of thumbnails, or justified buttons.

Re: Faster Layouts with CSS Grid and Subgrid

#37

Post by jasonsb »

maxharris wrote: post #20

So I'm working on a replacement for HTML and CSS. Right now it's written in JavaScript and it renders to canvas. The reason I'm posting here is because you can write your own layout components in my system. So if you have a new idea, instead of waiting years for it to get standardized and supported by the browsers, you can just roll your own idea and run it in anywhere without any fuss. (Flexbox took years to do some…

It looks like you're reinventing Adobe Flash, but this time without a browser plugin and with even less accessibility.

Re: Faster Layouts with CSS Grid and Subgrid

#38

Post by simcop2387 »

mtarnovan wrote: post #30
fimdomeio wrote: post #6

Please take into account current support for subgrid [1]. My first time redoing quite complex checkout table with mobile support was a nightmare. I only realised I needed something more halfway along the process. Found out it was subgrid I was looking for and they figuring out there was no current browser support. But using a oneliner like `grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));` too almost ful…

wow, you're not kidding. only latest FF supports subgrid ?!

not latest, but nightly FF. That's a pretty big non-starter.

Re: Faster Layouts with CSS Grid and Subgrid

#39

Post by The_rationalist »

miiiiiike wrote: post #27
The_rationalist wrote: post #21

Earlier quoted context omitted.

Sadly, I haven't been able to find any benchmarck comparing grid vs flexbox, despite layout being a common bottleneck.

They have different use cases. The rule of thumb is to use Flexbox if you're laying out content along the X or Y axis and Grid if you need to lay it out over both the X and Y axes.

I agree for the common case, but CSS grid even for one axis can be better, especially for gutter/gap.

Re: Faster Layouts with CSS Grid and Subgrid

#40

Post by icedchai »

maxharris wrote: post #20

So I'm working on a replacement for HTML and CSS. Right now it's written in JavaScript and it renders to canvas. The reason I'm posting here is because you can write your own layout components in my system. So if you have a new idea, instead of waiting years for it to get standardized and supported by the browsers, you can just roll your own idea and run it in anywhere without any fuss. (Flexbox took years to do some…

People were doing this with Java applets 20+ years ago. The first thing I noticed is I can't copy-and-paste.
Post reply on HN