Level 13
I think that flex box is what you are looking for. Have a look at the tailwind docs
Nov 2, 2020
7
Level 6
tailwind css- how to arrange few items on same row?
I am using tailwind and trying to implement card component. The code is as below:
<div class="max-w-md rounded overflow-hidden shadow-lg">
<img class="w-full" src="/img/card-top.jpg" alt="Sunset in the mountains">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">test123</div>
<p class="text-gray-700 text-base">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
</p>
</div>
</div>
<div class="max-w-md rounded overflow-hidden shadow-lg">
<img class="w-full" src="/img/card-top.jpg" alt="Sunset in the mountains">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">test123</div>
<p class="text-gray-700 text-base">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
</p>
</div>
</div>
The issue here is each card occupies an entire row but I would like to say place three cards component (with each space between) on the same row and another 3 each row and so forth. In bootstrap we can use grid system to achieve this.
For tailwind, what would be the right way to do this?
For example below:
@foreach ($concerts as $concert)
<div class="flex mb-4">
<div class="w-1/3 bg-gray-400 h-12 ">
{{$concert->title}}
</div>
</div>
@endforeach
If I have 10 items then all the items will be printed on same row since that what flex does.
Level 74
Wrap your cards with a div and give it the class of flex and you should be good to go.
1 like
Level 6
What if I am using for each of a collection and want to arrange it so there every three cards, it breaks to a new row?
Level 6
I have 10 cards and using flexbox will place them all the components on same row.
Level 74
You need to use flex-wrap and set a width of 1/3 on each of the cards.
Level 6
So something like:
@foreach($items as $item)
<div class="flex flex-wrap">
<div class="w-1/3">
{{$item->value}
......
</div>
</div>
@endforeach
?
Please or to participate in this conversation.