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

51–60 of 86 posts

Re: Faster Layouts with CSS Grid and Subgrid

#51

Post by jfk13 »

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…

This sounds kinda like what the Layout API in CSS Houdini aims to do (though I don't know much about the current status of it).

Re: Faster Layouts with CSS Grid and Subgrid

#52

Post by neon_electro »

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.

If the header and footer are permanent, what does the text do as you scroll the page if not going behind those elements?

Re: Faster Layouts with CSS Grid and Subgrid

#55

Post by zozbot234 »

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.

HTML Frameset/Frames used to do that quite nicely. I'm not sure why they were removed in newer HTML standards, with no good replacement.

Re: Faster Layouts with CSS Grid and Subgrid

#56

Post by shawnz »

fjp wrote: post #50
tannhaeuser wrote: post #18

Earlier quoted context omitted.

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.

Every time I thought I have needed float, I have always later found a cleaner way to do it without float.

That's probably because float is almost always used for things which it's not designed for. For cases like what the parent described, which float is actually meant for, there is no alternative.

A good example is the floating picture boxes next to paragraphs on Wikipedia. How would you implement such a feature without floats?

Re: Faster Layouts with CSS Grid and Subgrid

#57

Post by shawnz »

kerkeslager wrote: post #15
bobthepanda wrote: post #9

Earlier quoted context omitted.

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 it…

Now consider the same setup, but let's say you wanted all the boxes to be the same height: that would only be possible with grid, or by setting the heights manually

Re: Faster Layouts with CSS Grid and Subgrid

#59

Post by mkl »

0xffff2 wrote: post #46
Swizec wrote: post #45

Earlier quoted context omitted.

What’s VO and PTC? My mic is on a boom with a shock mount so the clacks really are just mellow background noise. I hate the loud bangs too.

VO -> Voice Over I assume. No idea what PTC is.

I think it's "Piece to Camera", which took quite some digging to find!

Re: Faster Layouts with CSS Grid and Subgrid

#60

Post by mkl »

neon_electro wrote: post #52
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.

If the header and footer are permanent, what does the text do as you scroll the page if not going behind those elements?

Maybe they want to avoid breaking scrolling with space and page down, which so many sites with headers and footers do by having the covered up text still count for positioning.
Post reply on HN