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

Question

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

I get:

Wanted:

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).

Cornet

direction: rtl; can be a possible way to achieve it. play.tailwindcss.com/lVJN7npilZ – Ethbun

lovely. If you make it an answer, I'll accept it, thanks a lot for sharing this trick! – Cornet

Answer 1

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

Ethbun