responsive container depend on list items
How i can make my container responsive
Depend on number of items
1:1 col 1 row
2 :1 col 1 row
3 :2-2
4:2-2
>20:4-5
Thers dynamic with css
4 Replies
If its depending on the number of items, you will probably need JS to set classes (or styles).
Else grid and minmax could be what you are looking for: https://developer.mozilla.org/en-US/docs/Web/CSS/minmax
(you also could get creative with
:has and :nth-child)Thanks i want to make card responsive
If item >20 items i show 5 columns and 5row
If >16 and <20 ==>4/5
Je nd the container max with is 900px
I want to make it reponsive with out any condition
https://codepen.io/amarlong/pen/WNyaQOJ
A starter set up, and do as Wolle said – play with minmax for the correct sizing of elements. But remember that by saying items > 20 equals 5 col by 5 rows is inherently working a bit against responsiveness ...
Å Marlon G
CodePen
Intrinsic CSS Grid – Card Elements
A responsive intrinsic grid for us, e.g. when amount of items is unknown. The width of each item is controlled by grid-template-columns, the height is...
Ithanks
I want when i have parameter comminc from api nbr of row and nbr of colum i want to divide parent div to this if number of element is many in scroll i show the rest with same nbr of col and row
I mean i want in preview div i dvide it to nbr of col and row getted from api
For example if i have 20 item and i have param 3 col 3 row i want always show 3x3 item in parent div when i scroll i show the next 9items
I hope my idea i clear