CODEWITHSUNDEEP
tailwind-css
mstdmstd
mstdmstd

Reputation: 3071

How to show items till 3 elements in 1 rows and next 4th element must be on next line with tailwindcss?

With tailwindcss 2 / Alpinejs 2.8 I try to show items till 3 elements in 1 rows and next 4th element must be on next line, something like I did wuth php/bootstrap :

        <div class="row m-2">
            @foreach($hostelFacilities as $nextFacility)
                <div class="facility_item col-12 col-sm-4">
                    {!! $viewFuncs->showAppIcon('check') !!}&nbsp;{{ $nextFacility->name }}
                </div>
            @endforeach
        </div>

I tried to make like :

        <div class="flex w-full"          >
            <template x-for="nextCategory in categories" :key="nextCategory.id">
                <div class="border px-2 cursor-pointer w-4/12 flex flex-nowrap"          >
                    <input type="checkbox"
                           x-model="searchSelectedCategoryIds"
                           :value="nextCategory.id"
                           class="editor_checkbox_field"
                    >
                    <label :for="'cbx_' + nextCategory.id"
                           class="whitespace-nowrap md:flex-shrink-0"
                           x-text="nextCategory.name">
                    </label>
                </div>
            </template>

But failed, as all items are in 1 row...

How correct?

Thanks!

Upvotes: 0

Views: 2754

Answers (1)

Digvijay
Digvijay

Reputation: 8947

In such case, I highly recommend to use grid system.

Here's an exmaple of 3 in one row.

<div class="grid grid-cols-3 gap-1">
  <div class="col-span-1 h-20 bg-gray-100">1</div>
  <div class="col-span-1 h-20 bg-gray-100">2</div>
  <div class="col-span-1 h-20 bg-gray-100">3</div>
  <div class="col-span-1 h-20 bg-gray-100">4</div>
  <div class="col-span-1 h-20 bg-gray-100">5</div>
  <div class="col-span-1 h-20 bg-gray-100">6</div>
  <div class="col-span-1 h-20 bg-gray-100">7</div>
  <div class="col-span-1 h-20 bg-gray-100">8</div>
</div>

Upvotes: 2

Related Questions