Hi, @bene-volent.
That's a good solution. Keep coding.
I like CSS Grid, and if you want to get practice with CSS Grid in this project, absolutely no problem, but I highly recommend using flex for your wrapper class to keep things simple.
Flexbox works perfectly with 1-dimensional layouts. And your wrapper class is completely 1-dimensional.
You can give hero, cta, details some width values using flex-basis and they'll fill the area you give them with flex-grow:1;, flex-shrink: 1;. And be sure to add flex-wrap: wrap to your flex container (your wrapper class).
I hope this will help you.
Keep coding and have a wonderful day.
@bene-volent
Posted
@adonmez04 Thank you for your recommendation. When I create the layout style before coding, I create boxes around elements on both Desktop and Mobile and fill any in between sizes. My main aim is always to make something that transitions well from mobile to desktop and in between and desktop to mobile.
I don't style websites thinking that I will make website for PC and for Mobile. I like make them think, that the browser window is resizable and it should look consistent on resize.
I was always fascinated by the window resize ability and how developers are able to keep design flow consistent. Using this principle, I always try to create a layout pattern that shifts well from Max-size to min-size.
For this layout, on mobile we don't event need a grid or flex on it. but on desktop, it is obvious that we need to use grid. So, I style them in a same layout pattern, i.e. Use grid on both sizes or flex or default block on all sizes.
This, allows me to stay consistent in my styling and reduces any chance of bugs which may occur due to implicit difference in layout properties.
I like to think that by doing such ways, reduces the overhead of layout computation for browser however small it may be and it helps me stay consistent with my design and coding. If it reduces any bugs, more benefit to me!!!
When do I use flex
- Horizontal layout with no fixed sizing of children
- When I know there is a need for flex, allowing children to have difference in their sizes
- When I need multiple rows but dont want a fixed sizing system i.e. each child element is flexible
- For Column, one question, Does this really need a flex on all sizes or not.
- Do need to fixed the flex-basis myself for every resolution
No such property is required here, so no flex.
Hope this helps you understand my thinking.
@bene-volent Yes, that makes sense. There are some positive and negative things about choosing grid or flexbox. It's definitely a personal decision. I prefer the simplest way because I want to focus on readable and maintainable code. I'm trying to do some responsive design without media queries. It works for me with some modern features like clamp. I highly recommend this site to use fluid units
https://utopia.fyi/.
You can set your max and min values with clamp and they'll change their values depending on your screen size.
Maybe you can check my latest work, I haven't finished it yet because I don't have enough energy now. I'll look at it later. However, there are no media-queries for this solution. https://adonmez04.github.io/skilled-e-learning-landing-page-v3.0/
