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
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...
This is worth a watch too
https://youtu.be/e6WuFNRP7e8?si=QnBtjIymzb88BTzh
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 -...
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?
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
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. š«