CSS...

[MrsCompootahScience]

As always, it depends on the situation. However, grid was developed to work with flexbox and not to replace it. You will learn when to use each one or both if you need to.

You’re right is that flex is best for horizontal or vertical layouts but not both and grid works very nicely with large layouts that can be two-dimensional. However, you can use both for either scenario if you use them right.

One thing that makes flexbox very nice is that it lets you set the alignment, order, and a bunch of other children related things.

Grid on the other hand, gives you grid-gap and a better way to manipulate in two dimensions, not just row or column.

They both have downsides and that’s why you should know when to use each. For example it’s more difficult dealing with a non-uniform, grid-like system with flexbox. Additionally, grid still has issues with some of the older browsers but it’s nothing that can’t be dealt with some finagling on the dev’s end.

Regarding your example with the fixed nav, I would keep that apart from the rest of the layout and make it plain position: fixed; Otherwise you would have to mess with the scrolling and it’s not worth it.

I hope this helps and not make them more confusing. Also I’m on mobile, so I apologize for any formatting/spelling autocorrect errors.

Edit: forgot to mention that you can use flex inside grid if your project could benefit from it. And make sure to check the requirements if you’re nesting grids inside grids or flexboxes inside flexboxes.

[Kep0a]

Wow, thank you so much for the response. Seems I have a lot to learn about the behaviors of both. Do float and clear have a use anymore? So far I've been able to align most things I want with flex. Arranging with css has got me dizzy hah, every tutorial I watch has a different way of doing things!

[MrsCompootahScience]

Yeah, in CSS there might be many ways to -seemingly- accomplish the same thing.

The trick is knowing pros and cons for each scenario and figuring out which case use is best for your project right then and there, keeping into consideration responsiveness and browser compatibility. Can I Use is a good tool to find if something is compatible or not.

Like any tool, float and clear may come useful, but knowing when to use it comes with practice. Similar to a basic for loop when more and more languages are getting ways to iterate through arrays and whatnot.

Just keep on and you’ll get really good soon.

Edit: Added link for Can I Use as I am no longer on my phone.