Click here to Skip to main content
15,867,594 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
i have a div witch contain different element
when i use the use the wrap property in the div the element wrap but i could not fix how many element i get in every row
for example
here i have a display who look like this with 4 element at every row
element element element element
element element element element
element element element element
element element

i want the wrap always to happen after the third element to have a display who look like this one
element element element
element element element
element element element
element element

could i do this ?

What I have tried:

i put a flex and the flex-wrap property at the div
Posted
Updated 17-Jan-21 23:02pm
Comments
[no name] 17-Jan-21 9:03am    
Use a smaller "column" width (so it wraps sooner).
aymen991 17-Jan-21 12:49pm    
it's not a solution because if the screen became bigger the result will be different

1 solution

CSS Flexible Box Layout - CSS: Cascading Style Sheets | MDN[^]
A Complete Guide to Flexbox | CSS-Tricks[^]

If you want to have three elements per row, specify a flex basis of around 33%.

NB: If you have margins or gaps between the child items, you will need to decrease the flex basis to account for those. It's usually easier to apply padding to the child items instead.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900