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

21–30 of 86 posts

Re: Faster Layouts with CSS Grid and Subgrid

#21

Post by The_rationalist »

Vanderson wrote: post #8
kerkeslager wrote: post #7

I've come to prefer flexbox over grid, the main reason being that it gives much more sensible behavior on different screensizes. When you want to lay out for different sizes of screens, grid usually means a completely separate layout inside a media section, while flexbox's wrapping behavior seems to smoothly transition between wide and narrow screens with only a few margin/width adjustments. There may be a sane way t…

Grid and flexbox have different uses and values. I wouldn't give up on grid. There are things it does that Flexbox fails spectacularly at. (absolute layout control for one...) But also flexbox does a few things grid simply cannot. So it's good to know both.

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

Re: Faster Layouts with CSS Grid and Subgrid

#22

Post by maxharris »

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!

Re: Faster Layouts with CSS Grid and Subgrid

#23

Post by swsieber »

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!

Not the downvoter, but...

I dont think this comment should be here on this post. The only tie-in is layout.

It should be a show in instead.

Re: Faster Layouts with CSS Grid and Subgrid

#24

Post by miiiiiike »

Swizec wrote: post #13
miiiiiike wrote: post #5

Good stuff. Keyboard clacking during screencasts is a non-starter for me tho. I really like Jen Simmons's videos on CSS layouts. ( https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag/vid... ) Before this month, the last time that I made a layout with CSS floats were still in style. When I decided to really learn modern CSS this month even starter videos like "Basics of CSS Grid: The Big Picture ( https://www.you…

> Good stuff. Keyboard clacking during screencasts is a non-starter for me tho. Funny, I often get compliments on the clacking of my mechanical keyboard in screencasts and livecodings. Creates a soothing background noise.

Clacks drive me up the wall. Having a table mounted mic in a podcast gets to me too. I can't concentrate if I keep hearing elbows hitting a table through a mic stand.

It's more editing work but I like to split out the screen recording, VO, and PTC. Bonus, you can get rid of jump cuts and other weird edits by cutting to the screen recording just before you messed up your line.

Re: Faster Layouts with CSS Grid and Subgrid

#25

Post by maxharris »

swsieber wrote: post #23
maxharris wrote: post #22

Earlier quoted context omitted.

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!

Not the downvoter, but... I dont think this comment should be here on this post. The only tie-in is layout. It should be a show in instead.

D'oh! I forgot all about that! I'm not trying to be spammy. I'm just trying to show that there is a completely different way of doing layout.

Re: Faster Layouts with CSS Grid and Subgrid

#27

Post by miiiiiike »

The_rationalist wrote: post #21
Vanderson wrote: post #8

Earlier quoted context omitted.

Grid and flexbox have different uses and values. I wouldn't give up on grid. There are things it does that Flexbox fails spectacularly at. (absolute layout control for one...) But also flexbox does a few things grid simply cannot. So it's good to know both.

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.

Re: Faster Layouts with CSS Grid and Subgrid

#28

Post by wolco »

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.

use the following attr on the element and put it on top for the header and bottom for the footer.

position: fixed;

Re: Faster Layouts with CSS Grid and Subgrid

#29

Post by arminiusreturns »

wolco wrote: post #28
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.

use the following attr on the element and put it on top for the header and bottom for the footer. position: fixed;

To prevent header and footer eating text and nav? Also doesnt using fixed take it out of the grid?

Re: Faster Layouts with CSS Grid and Subgrid

#30

Post by mtarnovan »

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 ?!
Post reply on HN