CSS Grid/Tailwind 在 "next row" 动态插入，同时仍然响应

Question

我使用 Tailwind 有这样的网格：

<div class="grid auto-rows-max grid-cols-2 gap-6 sm:grid-cols-3 sm:gap-8 md:grid-cols-4 md:gap-10 lg:grid-cols-5">
  <div>product</div>
  <div>product</div>
  <div>product</div>
  <div>product</div>
  <div>product</div>
  <div>product</div>
  <div>product</div>
</div>

请注意，CSS 网格在移动设备上为 2 列，放大尺寸为 3 列，在平板电脑上为 4 列，等等。

我想要的是创建一个“产品详细信息”行，该行插入到当前单击的行下方。因此，如果它是 2 列，并且您单击第一项，则详细信息行将显示为带有 col-span-2 的第三项（因为详细信息行是 'injected' 整行，位于所单击的任何行下方）

我能否仅使用 CSS 网格来实现此目的，然后再根据屏幕尺寸求助于 JavaScript 计算顺序的大量 hack？

Answer 1

您可以做到的一种方法是完全依赖 order 和响应实用程序。当然，此方法适用于您的示例，但会很快运行失去动力，因为 Tailwind 的默认订单仅为 12，您会发现自己向 Tailwind 配置中添加了大量新的订单变体......还有基于元素位置实现此目的的算法在 20 多个网格项目后会变得相当粗糙。

我所做的是在每个主要（产品）项目的订单之间留出空格，例如，前两个项目有 order-first，因为它们在所有屏幕尺寸上总是排在第一位，但其余的将第 3 项隔开 order-2，第 4 项 order-4 等。然后根据屏幕尺寸，产品详细信息只需落入每行之后的插槽中。这有点棘手，例如产品 1 和 2 的详细信息将得到以下 classes（为简单起见不包括词序）1 sm:3 md:5 lg:7 而产品 3 将得到 5 sm:3 md:5 lg:7 和产品 4 5 sm:9 md:5 lg:7 和 Product 5 会得到 order-9 md:11 lg:7，它呈现出一种奇怪的模式来尝试自动化，但我确信有人在 JS 中使用模数做了类似的事情，如果你有少量它应该很容易做一个案例陈述或保留一个数组引用和 select 正确的 class 组基于产品的索引。关于他们应该获得的细节的最后说明 col-span-full 以防止需要根据屏幕尺寸计算 col-span-x。

这里有一个 Play 示例，展示了所有细节如何根据屏幕大小落入正确的位置，同时仅借助 order 实用程序 https://play.tailwindcss.com/tMHIF2Rpfy

的强大功能直接跟随其相关元素

CSS Grid/Tailwind 在 "next row" 动态插入，同时仍然响应

CSS Grid/Tailwind dynamic insertion at "next row", while still being responsive

css

grid

flexbox

css-grid

tailwind-css