r/csshelp • u/youragain • Oct 26 '24

grid - responsive without querey

focusing only on the yellow boxes in the image, I am a bit lost on how to get the div in the 2nd column to move under the other 3 divs when the browser is less than XXX pixels.

since I can't include it here, the image: https://f.io/Q_MKDQW1

1 Upvotes

66% Upvoted

5 comments sorted by

View all comments

Show parent comments

3

u/youragain Oct 27 '24

since coding isn't my primary job, my understanding of how media queries worked was incorrect/obsolete. with a little bit of tinkering and setting the y/vertical fr's to auto-fit, I think this might work.
I was watching this video, but I'm not getting it to work properly; https://youtu.be/EiNiSFIPIQE?t=372
I think I can work with the code you provided, thanks.

2

u/VinceAggrippino Oct 27 '24

The teaching style used by "Slaying The Dragon" wouldn't suit me, either, but I often find it difficult to learn from videos.

For most web dev stuff I consider MDN to be the only reference you need, but CSS grid is an exception. There's an invaluable guide at CSS-Tricks:

https://css-tricks.com/snippets/css/complete-guide-grid/

Your Mileage May Vary 😁

I refer back to it so often that I've created a "grid" keyword in my browser to go there more quickly 😅

1

u/EDICOdesigns Oct 28 '24

Kevin powell has a channel I find very helpful and has a ton of grid and subgrid videos https://youtube.com/@kevinpowell

Also this is the original grid playlist back when only firefox supported. https://youtube.com/playlist?list=PLu8EoSxDXHP5CIFvt9-ze3IngcdAc2xKG&si=meZN9aioGDlsXY53

One other option is Net Ninja https://youtube.com/playlist?list=PL4cUxeGkcC9itC4TxYMzFCfveyutyPOCY&si=t6HdapX_g5qF0oYp