Yo how to limit items in a flex?
i have 9 items and right now its 4 next to eachother and i need it to be 3 items and it will go under it
12 Replies
it needs to be 3
i have this now and i need it to be 3 next to eachoter
grid-template-columns:repeat(3, 1fr);You can give a min-width to the children so that each take up space which makes 3 of them fit in a row and rest wrap using flex wrap. A codepen for reference: You can tweak the value of min-width to your liking. Also, note at one time during responsive mode, you are left with one orphan item which spans full-width.
https://codepen.io/i4mabdul/pen/qBwadYx
You can also use grid like tok124 mentioned.
its in a flexbox
If you want it to be exactly 3 per row. You should be using grid. not flexbox.
yeah like tok said, grid will give you specifics repeatedly
how to turn it into a grid 💀
i feel dumb actually
change
display:flex; to display:grid;https://css-tricks.com/snippets/css/complete-guide-grid/
Here you have a grid guide
Chris House
CSS-Tricks
A Complete Guide to CSS Grid | CSS-Tricks
Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.
kevin also have a bunch of grid videos on his youtube channel
Some that are more advanced and some that are very beginner friendly, for those who have never used grid