I’ve got a few more use cases shown in the video here: https://www.youtube.com/watch?v=64O8qi51Jqc and you can get a copy of the files I made in the demo in the chat here: Introduction to CSS Grid & Flex Layout: Hands-on Demo! - #10 by LauraKalbag
I find it much easier learning when based on a use case that applies to me. It removes any bias that a tutorial will not help me even though it may well.
I know what you mean, I find it easier to learn that way as well. Especially when it’s a very new concept to me.
How do you set a website content width?
Currently I’m trying to create a container for the content width within a section as I would it I was building a real site. The idea behind it is so that I have flexibility to have a section which content width or full width.
Is this text content or a group containing any kind of content?
If you want an element to be flexible and fill the width of its parent container, but not grow any bigger than a specific width (for example, 400px), you can do this with any element that’s inside a Grid or Flex layout. The “section” would have a Grid or Flex layout, and the “content” could be set to full width with a maximum width:
(Please excuse the ugly design!)
This means that the content will fill the width of the section, until it gets bigger than 400px, and then it stays at 400px wide.
Short video clip demoing the flexibility below:
