gridtailwind-cssright-align

TailwindCSS: How to add elements from the right side in a grid?

Given the classnames "grid grid-cols-5 gap-2 place-items-end"

I get: items aligned on the left

Wanted: items aligned on the right

Is there a CSS-only way of resolving this ? Having to set a "col-span-4" on the 6h star from js is a bit tedious (considering the number of stars I can get is unknown).

Solution

  • Reversing the second row with direction: rtl; will do the job.

    HTML:

    <div class="rtl-grid container w-96 bg-red-700 h-auto grid grid-cols-5 gap-4 p-4 -mt-4">
  <div class="bg-white h-12"></div>
  <div class="bg-white h-12"></div>
</div>

    CSS:

    .rtl-grid {
  direction: rtl;
}

    Tailwind Play