CSS/Tailwind 使用 flex 或 grid 以 3 行显示循环数据
CSS/Tailwind using flex or grid to display looped data in 3 rows
我有一个小型学校项目，我尝试使用 CSS 和 Tailwind 来学习。我需要在 Vue 中使用循环显示我的数据。此数据需要在桌面视图中显示为 3、2 和 3 行，并在移动视图中显示在彼此下方。在桌面视图中，所有项目的大小都必须相同，并且第二行的项目应居中。我不知道什么是显示所有项目的最佳方式，如下图所示：
不完全是 Tailwind 我相信虽然它最近增长如此之多谁知道，但它可能是可能的。
除中间一行外，布局很简单。为此，我添加了额外的边距以强制该行上只有 2 个项目，这将是您的自定义 css 进入并使用 :nth-child()
定位这些项目的地方
我有一个小型学校项目，我尝试使用 CSS 和 Tailwind 来学习。我需要在 Vue 中使用循环显示我的数据。此数据需要在桌面视图中显示为 3、2 和 3 行，并在移动视图中显示在彼此下方。在桌面视图中，所有项目的大小都必须相同，并且第二行的项目应居中。我不知道什么是显示所有项目的最佳方式，如下图所示：
不完全是 Tailwind 我相信虽然它最近增长如此之多谁知道，但它可能是可能的。
除中间一行外，布局很简单。为此，我添加了额外的边距以强制该行上只有 2 个项目，这将是您的自定义 css 进入并使用 :nth-child()