CSS/Tailwind 使用 flex 或 grid 在 3 行中显示循环数据 [关闭]

Question

我有一个小型学校项目，我尝试使用 CSS 和 Tailwind 进行学习。我需要使用 Vue 中的循环来显示我的数据。此数据需要在桌面视图中以 3、2 和 3 行显示，在移动视图中显示在彼此下方。在桌面视图中，所有项目的大小必须相同，并且第二行的项目应居中。我不知道显示所有项目的最佳方式是什么，如下图所示：

Answer 1

我相信不是纯粹使用 Tailwind，尽管它最近增长如此之多，谁知道呢，它是可能的。

除了中间行之外，布局很简单。为此，我添加了额外的边距以强制该行仅包含 2 个项目，这将是您的自定义 css 进入并使用 :nth-child()

定位这些项目的地方

https://codepen.io/clintongreen/pen/gOwmEKY