TailwindCSS 对齐内容在 CSS 网格中不起作用

Question

在 Tailwind CSS 中，对齐内容不起作用。 但是当我通过添加一个类将代码从grid-cols-3更改为Vanilla CSS并删除 tailwind grid-cols-3实用程序类时，假设新的div类名称是container ，添加以下代码实际上可以工作，让我很困惑：

.container {
  grid-template-columns: 100px 100px 100px;
} 

我在下面附上了顺风文件：

<div class="grid h-[500px] w-[500px] grid-cols-3 justify-end bg-slate-100">
  <div class="h-[50px] w-[50px] bg-red-200">1</div>
  <div class="h-[50px] w-[50px] bg-orange-200">2</div>
  <div class="h-[50px] w-[50px] bg-yellow-200">3</div>
  <div class="h-[50px] w-[50px] bg-green-200">4</div>
  <div class="h-[50px] w-[50px] bg-blue-200">5</div>
  <div class="h-[50px] w-[50px] bg-indigo-200">6</div>
</div>

Answer 1

justify-end适用于容器（它有 3 个大小相等的列，适合整个宽度，所以在这里没有意义）。

这就是您需要的： justify-items-end ，适用于列内。