Level 6
Have you given grid a try?
Nov 27, 2022
6
Level 51
CSS flex: tailwind justify-center with flex-wrap
So I want the cards to center horizontally with a max card width (without using some @if to add new rows).
My limitations with flex are showing. This works, but the margins are not correct on the outsides. So I would end up doing some overflow hidden and negative margin. Started feeling circa 2012.
Flex me up please.
<div class="flex flex-wrap justify-center mx-auto max-w-[1100px]">
<div class="card basis-full sm:basis-1/2 lg:basis-1/3">
<div class="bg-gray-300 rounded-md m-2 aspect-video m-2"> </div>
</div>
// ... more cards
</div>
What I imagine is something like this...
<div class="... gap-4">
<div class="card bg-gray-300 rounded-md w-1/3 aspect-video"> </div>
// ... more cards
</div>
but that doesn't work anyway i've sliced it. Adding flex-wrap breaks the gap and the width forces to the next row.
Level 51
@JakeCausier, do you have a way to make grid 'justify-center'?
Level 51
So my current solution... is custom css in app.css with calc :/
@media(min-width: 640px) {
.projects .card {
width: calc(50% - 11px);
}
}
// and so on...
<div class="flex flex-wrap justify-center gap-4">
<div class="card aspect-video ... "> </div>
...
</div>
1 like
Level 102
@webrobert can you copy paste the html into https://play.tailwindcss.com/ so we can see if we can find a solution ?
1 like
Level 51
Level 102
@webrobert Hmm yeah you are indeed right. All solutions I can find suggests the trick you are already doing. Trying to find a tailwind style fix
1 like
Please or to participate in this conversation.