Responsive columns

Hi, I thought I could quite easily make a layout where I have two columns in a grid, whereby the first column (which is wider) would shrink at a slower rate than the second column, and when there was no room left for the second column, it would just pop underneath. Basically this responsive layout, but with different rates of shrinking for the columns: https://codepen.io/amarlong/pen/WNyaQOJ I have a feeling this is very easy, but I'm not conceptually understanding what I need to write. Here's the repo: https://github.com/AMarlonG/Rondo-prototype
5 Replies
clevermissfox
clevermissfoxā€¢2mo ago
Check out kpows video using flex and grid on a main and sidebar https://youtu.be/LEkFckg7sfw?si=5dosZV1Cj8nTHKAQ Code for flex: https://codepen.io/kevinpowell/pen/MWxEjMx Code for grid: https://codepen.io/kevinpowell/pen/abMLmeO
Kevin Powell
YouTube
Use this instead of media queries or container queries
Media queries are a bit limited in how they work, and while container queries go a really long way in solving a lot of those limitations, there are intrinsic patterns that we can follow that allow us to do things that neither one of them can do. The setup is a bit strange and can look complex, but, in my opinion, it's also 100% worth it! šŸ”— Lin...
clevermissfox
clevermissfoxā€¢2mo ago
Kevin Powell
YouTube
This changed how I use media queries
Looking to step up your CSS Game? I have free and premium courses šŸ‘‰ https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=calcmediaqueries šŸ”— Links āœ… My video where no media or container query is used: https://youtu.be/LEkFckg7sfw āœ… Code from this video: https://codepen.io/kevinpowell/pen/wvZvdLN āŒš Timestamps 00:00 -...
ƅ Marlon G
ƅ Marlon Gā€¢2mo ago
Yes! Right! Chatty time ... First: Thank you so much @clevermissfox , I've watched them before and thought they were really intruiging, but needed you to pull them out of the library for me. šŸ™šŸ¾ My question is: Is the grid solution actually doing what I ask for? Because as far as I understand they only let me create equal sized columns, that shrink at the same rate. The way I see the grid solution is to jump from one column to e.g. 3 columns, instead of the auto-fit just adding one extra column whenever needed. But you can't really control the rate of shrinking for specific individual columns in the grid solution, like he does in the flex solution?
clevermissfox
clevermissfoxā€¢2mo ago
you can make one larger col and one smaller column or make three equal columns and have the first element span 2 columns. I was mostly posting these to point you towards the flex solution as it sounds like utilizing flex-grow and flex-basis is what you're looking for and is very simple esp with kpow's guidance
ƅ Marlon G
ƅ Marlon Gā€¢2mo ago
Absolutelly! And i totally worked with the flex solution. TY! I was just wondering if I wasn't understanding something about the grid solution, so good to know that I picked up the difference. All the small victories. šŸ«