(video)
Faster Layouts with CSS Grid and Subgrid
61–70 of 86 posts
Re: Faster Layouts with CSS Grid and Subgrid
#62Re: Faster Layouts with CSS Grid and Subgrid
#63Earlier quoted context omitted.
Don't think that has the desired effect; at least if I understood the request properly. The text area won't get a scrollbar when more text is added to fill the view area. It seems in this case you would have to manually ensure that the text you gave could fit in 80% of the screen, or bad things happen visually. Also, the header and footer aren't permanent, they are affected by the entire-page scrollbar.
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.
Re: Faster Layouts with CSS Grid and Subgrid
#64Earlier quoted context omitted.
I think it's "Piece to Camera", which took quite some digging to find!
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.
Re: Faster Layouts with CSS Grid and Subgrid
#65Earlier quoted context omitted.
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?
You don't want those elements part of your grid.
Re: Faster Layouts with CSS Grid and Subgrid
#66I'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 haven't "started implementing some layout tools" --- they literally did it, en masse, in 2017. Grid was available for everyone's use by October.
Do yourself a favor and work through the examples here: https://gridbyexample.com/
Do yourself another favor, and stop trying to make different layouts for all the different sizes. Or, go with insanity - your call. Grid is for responsive layout, out of the box; no negative margins, no weird padding, no inane extra workarounds just to get something to line up.
Once you understand that CSS Grid is the tool we have been waiting for since the late 90s, and that it, NOT Flexbox, is the sane, maintainable, future-proof layout tool for pages, and then using Flexbox within it to adjust flow and tempo -- you will/can spend a lot more time playing with things for the sake of play, and not for the sake of debugging.
Good luck.
Re: Faster Layouts with CSS Grid and Subgrid
#67I'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.
To be fair, we didnt get Grid till 2017. So.. we finally have (nearly) all the tools we need. Maybe. lol
Float is still very useful for paragraph wrapping around media, for basic alignment etc, when you do not need an entire flow of content to be under the management of flexbox. Less is more.
Re: Faster Layouts with CSS Grid and Subgrid
#68Please 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 ?!
Yes - it came out earlier this week or end of last week. But CSS Grid has been available since 2017. So, we are able to still solve a lot of layout issues with grid, than leaning 100% on flexbox.
Every tool for its purpose! We have nearly a full toolbox on the CSS side of things. Happiness.
Re: Faster Layouts with CSS Grid and Subgrid
#69I'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…
While I agree with almost everything you said, did you need to be condescending while doing it?
Re: Faster Layouts with CSS Grid and Subgrid
#70I'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…
> CSS Grid is a two dimensional layout tool. Flexbox is one.
>CSS Grid is for architectural layout. Flexbox is for alignment and flow layout.
I agree with the first (it seems impossible not to) but I think the 2nd is kind of a misconception. That grid is for “architectural layout” ... it’s for any two-dimensional layout, any time, any place. And flexbox is often totally appropriate for laying out entire pages or large sections of pages, if 2 dimensions of flexibility are not needing to be controlled. You can have grids inside your flex items inside your grids inside your flex items as needed.
The decision of layouts having to look a certain way at different sizes unfortunately is often made long before any code is written to implement a design in my experience. Not much the implementation person can do except maybe push back, but it can be a tough sell to ask for an approved design to change so that the underlying code can be less hacky.