I’m wondering how or what the best way to go about making card groups use rows and columns is? This would be useful to me because I need to add many items to a card group and instead of having it just go horizonal and get too smushed, it could also extend vertically in a column like format as well. Hopefully there’s a better way besides just adding more card groups below each other.
Something like this ( this is just using multiple card groups )
I’m maybe weird, but so often I don’t understand most of questions users ask here, lol.
What kind of items? How it would look like, card automatically puts a item below others it doesnt go horizontal, How many cards do you need? 3 or by items u meant cards? Pls explain more deeply, showcase the idea or something cause fr i don’t understand anything what u mean and what u want to achieve cause to me it doesn’t make any sense especially that u can setup columns size which limit the width of it lmao.
You need to set the amout of columns per row and then not have any width classes in the columns. Something like:
<div class="container">
<div class="row row-cols1 row-cols-sm-2 row-cols-md-3 row cols-lg4 g-3">
<div class="col">
your card here
</div>
<div class="col">
your card here
</div>
.............
</div>
</div>
This will make the cards stack on mobile, two in a row on small devices, three in a row on desktop and four on large desktops up. the ‘g-3’ is just to add some gutters vertically and horizontally.
Flex is already built into a lot of the components as well, and I think you should be able to do as @richards says with setting the number of columns per row (assuming you are putting each card into a column of course). Flex should take care of the rest. In fact I am not really sure you need to set anything at all unless you want a specific layout with specific number of columns and rows. Flex will automatically wrap the columns to the next line when it hits the end of your breakpoint. At least it has for me.
From there you just may need to do a little tweaking to get things centered and such.