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

11–20 of 86 posts

Re: Faster Layouts with CSS Grid and Subgrid

#11

Post by Scarbutt »

jassmith87 wrote: post #10
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…

I have been in desktop and mobile dev my entire career. Starting doing web dev 12 months ago for a new job. Never once have I thought to myself "I should figure out what float does". Grid + Flex + Block + Absolute covers all layout needs. It's funny to me because conceptually these ideas have been around on desktop/mobile layout systems forever. That they are only now making it to the web is insane.

Floats are still useful, not for the same things you would use grid/flex but still has utility, so its good to know about them.

Re: Faster Layouts with CSS Grid and Subgrid

#12

Post by kerkeslager »

Scarbutt wrote: post #11
jassmith87 wrote: post #10

Earlier quoted context omitted.

I have been in desktop and mobile dev my entire career. Starting doing web dev 12 months ago for a new job. Never once have I thought to myself "I should figure out what float does". Grid + Flex + Block + Absolute covers all layout needs. It's funny to me because conceptually these ideas have been around on desktop/mobile layout systems forever. That they are only now making it to the web is insane.

Floats are still useful, not for the same things you would use grid/flex but still has utility, so its good to know about them.

For what?

I literally haven't used float since grid/flexbox hit adequate market share on CanIUse, and I've been doing web development full time this whole time.

Re: Faster Layouts with CSS Grid and Subgrid

#13

Post by Swizec »

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.

Re: Faster Layouts with CSS Grid and Subgrid

#14

Post by srirachafari »

kerkeslager wrote: post #12
Scarbutt wrote: post #11

Earlier quoted context omitted.

Floats are still useful, not for the same things you would use grid/flex but still has utility, so its good to know about them.

For what? I literally haven't used float since grid/flexbox hit adequate market share on CanIUse, and I've been doing web development full time this whole time.

For when you move to a company where the current canIUse marketshare for grid/flexbox is no longer "adequate."

Re: Faster Layouts with CSS Grid and Subgrid

#15

Post by kerkeslager »

bobthepanda wrote: post #9
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…

Flexbox is great if you don’t have wildly different layouts across different screen sizes. If your layout is different enough that you’ll need media queries then you’ll want to use grid anyways.

> If your layout is different enough that you’ll need media queries then you’ll want to use grid anyways.

Ehhh, not really.

A common case is items laid out as boxes. On desktop I want them in rows of 3 to 5 (perhaps more on wider screens, but often this starts to look stupid beyond 4 or 5 so you set a max width for the container). And in mobile we want 1 item per row. With flexbox, you just change the width of the items from 33.33% to 100% in the media query, maybe with some adjustments to margins, and you're golden.

Re: Faster Layouts with CSS Grid and Subgrid

#16

Post by throwaway_bad »

kerkeslager wrote: post #12
Scarbutt wrote: post #11

Earlier quoted context omitted.

Floats are still useful, not for the same things you would use grid/flex but still has utility, so its good to know about them.

For what? I literally haven't used float since grid/flexbox hit adequate market share on CanIUse, and I've been doing web development full time this whole time.

Floats should now only be used for what it's named for, to float around other elements:

https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outsi...

(shape-outside is super buggy though)

Re: Faster Layouts with CSS Grid and Subgrid

#17

Post by nwienert »

kerkeslager wrote: post #12
Scarbutt wrote: post #11

Earlier quoted context omitted.

Floats are still useful, not for the same things you would use grid/flex but still has utility, so its good to know about them.

For what? I literally haven't used float since grid/flexbox hit adequate market share on CanIUse, and I've been doing web development full time this whole time.

For having an image where text flows around it once it finishes. It’s basically good for some text flowing stuff. Which makes sense, that’s what it was designed for originally.

Re: Faster Layouts with CSS Grid and Subgrid

#18

Post by tannhaeuser »

kerkeslager wrote: post #12
Scarbutt wrote: post #11

Earlier quoted context omitted.

Floats are still useful, not for the same things you would use grid/flex but still has utility, so its good to know about them.

For what? I literally haven't used float since grid/flexbox hit adequate market share on CanIUse, and I've been doing web development full time this whole time.

Floats are still useful when you want to express structured document flow layouts with illustrations for nearby body text, side-nav link boxes, aligned or otherwise flow-parametered effects such as initials, syndicated/contributed content, or when you just want to float text around images.

Re: Faster Layouts with CSS Grid and Subgrid

#19

Post by dariusj18 »

bobthepanda wrote: post #9
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…

Flexbox is great if you don’t have wildly different layouts across different screen sizes. If your layout is different enough that you’ll need media queries then you’ll want to use grid anyways.

Flexbox is a pain to do gutters

Re: Faster Layouts with CSS Grid and Subgrid

#20

Post by maxharris »

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 something that should have only taken days.)

Live demo: http://doc-test.maxharris.org/ (NB: it doesn't support mobile touch events yet, so try that out on a desktop browser.)

The framework used by the demo: https://github.com/maxharris9/layout

If you want to get in touch with me about this thing, I'm maxharris9 on twitter.

Post reply on HN