TailwindCSS：如何在网格中从右侧添加元素？答案

【问题标题】：TailwindCSS: How to add elements from the right side in a grid?TailwindCSS：如何在网格中从右侧添加元素？
【发布时间】：2021-03-21 17:23:49
【问题描述】：

给定类名“grid grid-cols-5 gap-2 place-items-end”

我得到：

想要：

是否有解决此问题的纯 CSS 方法？必须在 js 的 6h 星上设置“col-span-4”有点繁琐（考虑到我能得到的星数是未知的）。

【问题讨论】：

direction: rtl; 可能是实现它的一种方法。 play.tailwindcss.com/lVJN7npilZ
可爱。如果你把它作为一个答案，我会接受它，非常感谢分享这个技巧！

标签： grid tailwind-css right-align

【解决方案1】：

用direction: rtl; 反转第二行就可以了。

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

【讨论】：