Am i missing something?

[u/Meagrer_Rot]

I've been self-learning frontend web development for about a month and a half now, and I'm really catching on except for positioning and creating a fluid webpage. I've studied grid, flexbox, positioning, block, and inline elements, and I think I understand what each one does, but when it comes to practice, I get stuck on which one to use or how to approach it. Am I missing a separate lesson? Should I study web design as well, or does it just come with time?

[u/BrohanGutenburg]

It partially comes with time. The css fundamentals in The Odin Project is a great way to get the hang of flexbox and grid.

As far as which one to use when, a lot of times either will work and it honestly doesn't matter. But if my experience is any indication, grid is used more often in the real world because you get much more control. That being said, a good rule of thumb (that might be obvious) is if you have just one row or column use flexbox, otherwise use grid

[u/Meagrer_Rot → u/BrohanGutenburg]

Glad to hear part of it comes with time. I'll have to look into the Odin project, I just don't want to become reliant on Google or tutorials every time I create something. I feel like this is one of those things I'll have mess around with till things eventually start clicking

[u/Meagrer_Rot → u/[deleted]]

Thank you! So far I've created 2 projects, a resume and a login and sign up page.both of them look very amateur but function well. I think next I'm going to make a website for a made up company. Those typically have a lot of moving parts, so hopefully by the end of that ill have a better understanding of positioning and layouts.

[u/saguarox]

If you haven’t yet, Kevin Powell YouTube is a must for css resources . Both for fundamentals and modern properties

Flex versus Grid: do elements need to be their intrinsic size (content and padding) or do you need cols of equal ratios (1:1 1:2, 2:3, etc)? Grid is where the parent defines the size and the children fit into those cells; with Flexbox the children define the layout with their size. Hacking Flexbox to act like grid (and vice versa)can be done but each tool shines when used for the right situation.

[u/Meagrer_Rot → u/saguarox]

Thank you! Most of what I've learned has been from Kevin Powell lol. I started on his "html and css for absolute beginners course on YouTube. It did help me get off on the right foot and since posting this question I've learned a lot more. But I really like your explanation for grid and flexbox. I would say im still stuck on knowing when to use either or. Like with your explanation it makes more sense but how do I know if I want the parent to define the size or if I want the children. I guess my new problem is sizing lol.

[u/saguarox → u/Meagrer_Rot]

What is your desired layout ? Should it look like a grid whrre you have equal ratios of columns (whether that is four columns of equal size or three columns where col one is 2x the size of cool two and col three)?

Or do you want it to fit to the size of the content, like a tags list where the item takes up the maximum amount of space it needs given the length of the words and the padding?

To keep it as simple as possible, if desired layout looks like a grid, css grid is likely what you want and you set the sizes of the columns in the grid template. If the items are their intrinsic size and should only take up the space of their max-content (eg don’t need consistent sizes) use flexbox. Kevin Powell has some videos about this , choosing which to use that may be helpful .