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

71–80 of 86 posts

Re: Faster Layouts with CSS Grid and Subgrid

#71

Post by wilsmex »

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…

I’ve had great feedback on my css grid crash course video: https://m.youtube.com/watch?v=SPFDLHNm5KQ

Re: Faster Layouts with CSS Grid and Subgrid

#72

Post by maxharris »

icedchai wrote: post #40
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.

I'll try doing something about that, but browsers control the clipboard in a pretty manipulative way. My current opinion is that they should allow apps to request clipboard access, rather than trying to restrict them completely as they do today.

Re: Faster Layouts with CSS Grid and Subgrid

#74

Post by snuxoll »

tux1968 wrote: post #63
nicoburns wrote: post #49

Earlier quoted context omitted.

All you need is an `overflow-y: scroll` on the text element, and it will work as desired. The whole page won't have a scrollbar, because no content will be overflowing past it's boundaries. Grid is ideal for these kind of layouts.

Thanks, that worked. Although I did still have to suppress the page scrollbar with "body { overflow-y: hidden; }" Not sure why.

Might need to use normalize or reset to deal with margin collapse, even then I’ve noticed the behavior at random times. The CSS box model is simple yet obtuse all at once.

Re: Faster Layouts with CSS Grid and Subgrid

#75

Post by galaxyLogic »

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.

It would be nice to find a document showing how to do some examples in both Grid and Flex and compare the amount of markup needed, also pros and cons of each for each example

Re: Faster Layouts with CSS Grid and Subgrid

#76

Post by chrismorgan »

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.

On my website I have a sidebar (on large enough displays) where I put sidenotes (which I typically prefer to footnotes). https://chrismorgan.info/blog/dark-theme-implementation/ is an example of an article with both float-based sidenotes and grid-based figure captions in that sidebar. Look at what happens on mobile-sized displays, too. https://chrismorgan.info/blog/2019-website/ is an example of where float really shines on this, with the second sidenote automatically moving down the page due to the length of the first sidenote.

Re: Faster Layouts with CSS Grid and Subgrid

#77

Post by Izkata »

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

That'll still shrink/stretch the header/footer based on window size, which usually isn't what you want (headers and footers usually being a static height). Really, this layout flows from top to bottom, so my instinct wouldn't even be to use grid - just leave the divs as blocks and give them the appropriate height:

  
    
    
    
  

  .header { height: 30px; }
  .footer { height: 20px; }
  .content {
    height: calc(100vh - 50px);
    overflow: auto;
  }
Bonus: If you have to support it still, this version works all the way down to IE9.

Re: Faster Layouts with CSS Grid and Subgrid

#78

Post by thedevilslawyer »

jsjohnst wrote: post #69
weo3dev wrote: post #66

Earlier quoted context omitted.

Oof. You are definitely missing the entire point of CSS Grid. CSS Grid is a two dimensional layout tool. Flexbox is one. CSS Grid is for architectural layout. Flexbox is for alignment and flow layout. CSS Grid was enabled across all major platforms by October 2017. You've had two years to figure that out. You want it on IE? Then use CSS Grid's original syntax because Microsoft supported Grid first . The browsers have…

While I agree with almost everything you said, did you need to be condescending while doing it?

These is value to vehemence in arguments.

Re: Faster Layouts with CSS Grid and Subgrid

#79

Post by Vinnl »

weo3dev wrote: post #66
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…

Oof. You are definitely missing the entire point of CSS Grid. CSS Grid is a two dimensional layout tool. Flexbox is one. CSS Grid is for architectural layout. Flexbox is for alignment and flow layout. CSS Grid was enabled across all major platforms by October 2017. You've had two years to figure that out. You want it on IE? Then use CSS Grid's original syntax because Microsoft supported Grid first . The browsers have…

> The browsers haven't "started implementing some layout tools" --- they literally did it, en masse, in 2017.

Fun fact: Grid support in Blink and WebKit were added by the same people. https://blogs.igalia.com/mrego/2017/03/16/css-grid-layout-is...

Re: Faster Layouts with CSS Grid and Subgrid

#80

Post by danpeddle »

mkl wrote: post #64
danpeddle wrote: post #62

Earlier quoted context omitted.

Push to chat, no?

The context is video creation: "It's more editing work but I like to split out the screen recording, VO, and PTC." Piece to camera is talking directly to the camera, unlike a voice over while showing something else. Makes sense to me, but I'm guessing a bit. How would "push to chat" fit in? I don't recognise it.

Was thinking in context of gated voices, background noise etc. Think it’s actually push to talk, so I’m not right on reflection.
Post reply on HN