CODEWITHSUNDEEP
htmlreactjsflexboxtailwind-cssresponsive
blest
blest

Reputation: 739

Tailwind a max of two flex items per row

I've the following items:

const items = ['2342', 'Jensen Huang', '[email protected]', '$ 200', 'delivered','29 Aug 2022', 'View All of the items']

And it is rendered as such (it's like flex-auto):

<div class="border flex flex-wrap gap-4 justify-between">
  {items.map((item) => <p>{item}</p>)}
</div>

It gives the following

+-----------------------------------------+
|2342     Jensen Huang    [email protected]|
|$ 200     delivered           29 Aug 2022|
|View All of the items                    |
+-----------------------------------------+

but I want a maximum of two elements per row; like this:

+--------------------------------+
|2342                Jensen Huang|
|[email protected]           $ 200|     
|delivered            29 Aug 2022|
|View All of the items           |
+--------------------------------+

Upvotes: 6

Views: 17409

Answers (2)

Lukas249
Lukas249

Reputation: 2471

Use grid and grid-cols-2.

<div class="border grid grid-cols-2 gap-4 justify-between">
  {items.map((item) => <p>{item}</p>)}
</div>

Upvotes: 15

Robert Boespflug
Robert Boespflug

Reputation: 21

I think something like this might be what you want?

<div class="border flex flex-wrap gap-4 justify-between">
<div>
    <p>2342</p>
    <p>[email protected]</p>
    <p>delivered</p>
    <p>View All of the items</p>
</div>
<div>
    <p>Jensen Huang</p>
    <p>₹ 200</p>
    <p>29 Aug 2022</p>
</div>

Upvotes: 1

Related Questions