Complicated ? Grid question
hi guys i have a css expert question i have a use case of a grid that can have from 1 to 16 items. it should be reponsive bothe from a screen prespective and from an item prespcetive where items should be distrbuted evently ni the gris and the coloumns should be calculated base on grid items. for example 4 itesm 2 column 8 items 3 coulmns. also the grid should dbe repsonsive by screen size so if small screen grid is just 1fr. for example,. in addition the height width of each grid should mainatain a 16:9 aspect ration always . (ims howing video) any way i can start to tacc,.e this
3 Replies
It takes a little bit of work to get them to work based on item count, but it's definitely possible 🙂
If you want to have a minimum column size, it only really works with container queries, because then you can calculate the size of the columns and gaps properly, but you could get an estimation using media queries as well.
There's no real automatic way to do it at the moment though, you sort of have to hard code things, to a certain extent. https://codepen.io/kevinpowell/pen/VYYoOxe
Wow, the KING himslef! thanks Kevin. i was able to twick this together with som js for the inital coloumn template to achive almost (>) what we needed, this is a great start. Thanks so much for reponding. Your videos are awesome!
Grid is tricky fr