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

Posted 2023-03-07

【中文标题】TailwindCSS：如何在网格中从右侧添加元素？

【英文标题】：TailwindCSS: How to add elements from the right side in a grid?

【发布时间】：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

可爱。如果你把它作为一个答案，我会接受它，非常感谢分享这个技巧！

【参考方案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