Question 271475 in CSS Question posted in
Some basic documentation can be found here.

Css – How to make a grid elemet scrollable with Tailwind?

I have a component that can display more than 2 cards, and I want my component to display 3 cards max, and allow a scroll x if there are more than 3 cards.

In my code, the 4th card always go on second row.

How to fix this ?

code :

<div class="m-10 w-96 border-2">
  <div class="grid w-full grid-cols-3 gap-3 overflow-x-auto">
    <button class="flex w-full flex-col gap-1 rounded-xl bg-blue-300 p-3 shadow-md">Button</button>
    <button class="flex w-full flex-col gap-1 rounded-xl bg-blue-300 p-3 shadow-md">Button</button>
    <button class="flex w-full flex-col gap-1 rounded-xl bg-blue-300 p-3 shadow-md">Button</button>
    <button class="flex w-full flex-col gap-1 rounded-xl bg-blue-300 p-3 shadow-md">Button</button>
  </div>
</div>

Here is a playground

Thank you for your time.

Tags:

2

Answers


  1. 0

    You probably gonna need a Flex-Box for that

    <div class="m-10 w-96 border-2">
  <div class="flex w-full overflow-x-auto whitespace-nowrap gap-3">
    <button class="flex-none w-1/3 flex flex-col gap-1 rounded-xl bg-blue-300 p-3 shadow-md">Button</button>
    <button class="flex-none w-1/3 flex flex-col gap-1 rounded-xl bg-blue-300 p-3 shadow-md">Button</button>
    <button class="flex-none w-1/3 flex flex-col gap-1 rounded-xl bg-blue-300 p-3 shadow-md">Button</button>
    <button class="flex-none w-1/3 flex flex-col gap-1 rounded-xl bg-blue-300 p-3 shadow-md">Button</button>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    You can try something like this:

    <div class="m-10 w-96 border-2">
  <div class="grid w-full grid-flow-col auto-cols-[theme('spacing.28')] grid-cols-[repeat(auto-fill,_auto)] gap-4 overflow-x-auto">
    <button class="flex w-full flex-col gap-1 rounded-xl bg-blue-300 p-3 shadow-md">Button</button>
    <button class="flex w-full flex-col gap-1 rounded-xl bg-blue-300 p-3 shadow-md">Button</button>
    <button class="flex w-full flex-col gap-1 rounded-xl bg-blue-300 p-3 shadow-md">Button</button>
    <button class="flex w-full flex-col gap-1 rounded-xl bg-blue-300 p-3 shadow-md">Button</button>
    <button class="flex w-full flex-col gap-1 rounded-xl bg-blue-300 p-3 shadow-md">Button</button>
  </div>
</div>

    I have given each column a fixed width of 7rem using theme('spacing.28') so that only three of them are visible in your w-96 container. If that is not necessary then you can use something like auto or max-content.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search