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
Betterkosova
Betterkosova•8mo ago
it needs to be 3
Betterkosova
Betterkosova•8mo ago
No description
Betterkosova
Betterkosova•8mo ago
i have this now and i need it to be 3 next to eachoter
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•8mo ago
grid-template-columns:repeat(3, 1fr);
Abdul Rehaman Shaikh
Abdul Rehaman Shaikh•8mo ago
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.
Abdul
CodePen
qBwadYx
...
Betterkosova
Betterkosova•8mo ago
its in a flexbox
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•8mo ago
If you want it to be exactly 3 per row. You should be using grid. not flexbox.
ZNP
ZNP•8mo ago
yeah like tok said, grid will give you specifics repeatedly
Betterkosova
Betterkosova•8mo ago
how to turn it into a grid 💀 i feel dumb actually
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•8mo ago
change display:flex; to display:grid;
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•8mo ago
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.
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•8mo ago
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
Want results from more Discord servers?
Add your server