Tailwind 每行最多两个弹性项目

Question

I've the following items:

const items = ['2342', 'Jensen Huang', 'jensen@gmail.com', '$ 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    jensen@gmail.com|
|$ 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|
|jensen@gmail.com           $ 200|     
|delivered            29 Aug 2022|
|View All of the items           |
+--------------------------------+

Answer 1

Use grid and grid-cols-2 .

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

Answer 2

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>jensen@gmail.com</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>