Faster Layouts with CSS Grid and Subgrid
hacks.mozilla.org
Faster Layouts with CSS Grid and Subgrid
1–10 of 86 posts
Re: Faster Layouts with CSS Grid and Subgrid
#2Faster as in less time to author or as in better performance?
Re: Faster Layouts with CSS Grid and Subgrid
#3Faster as in less time to author or as in better performance?
I assume the former. From the article:
"Don’t let that stop you: CSS Grid has made my layout process faster and simpler, with more flexibility. "
Re: Faster Layouts with CSS Grid and Subgrid
#4Faster as in less time to author or as in better performance?
Based purely on the article content, it appears to be "less time to author":
"CSS Grid has made my layout process faster and simpler, with more flexibility. We can get started with a few basics, and the fallbacks don’t have to be overwhelming"
Re: Faster Layouts with CSS Grid and Subgrid
#5Good 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.youtube.com/watch?v=FEnRpy9Xfes)" were over my head.. I'm a back-end developer, I'd never used Flexbox let alone Grid. As I watched Jen's videos I scribbled down what she was excited about and then started reading "CSS: The Definitive Guide (https://www.amazon.com/CSS-Definitive-Guide-Visual-Presentat... cover to cover.
I'm really glad that I watched Jen's videos first. Having some best practices in my head before I learned the mechanics of Flexbox and Grid helped crystallize everything. Now that I'm basically through CSS: TDG I'm re-watching her videos and getting even more out of them.
Re: Faster Layouts with CSS Grid and Subgrid
#6Please 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 fully create a grid system is pretty amazing and something you can use right now.
Re: Faster Layouts with CSS Grid and Subgrid
#7I'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 to get the same behavior with grid auto-flow, but if there is, I haven't figured it out.
One thing I'd like to try, but have never had the budget for, is completely isolated grid layouts for different sizes. That is, all the layout is in mutually-exclusive media sections. This has a higher up-front cost, but I suspect in the long run, the higher up-front cost would be outweighed by having layouts more fine-tuned for the screen sizes, and more decoupled so you don't have to worry about changes in desktop-size layouts affecting mobile-size layouts.
Flexbox also has a significantly larger browser share than Grid on CanIUse.
Really though, I'm greatly relieved to see browsers start implementing some layout tools that corresponds to how people actually think about layouts. The float years were dark times.
Re: Faster Layouts with CSS Grid and Subgrid
#8I'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.
Re: Faster Layouts with CSS Grid and Subgrid
#9I'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.
Re: Faster Layouts with CSS Grid and Subgrid
#10I'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.