CSS Grid/Tailwind 在“下一行”动态插入，同时仍然是响应式的

Posted 2023-03-07

【中文标题】CSS Grid/Tailwind 在“下一行”动态插入，同时仍然是响应式的

【英文标题】：CSS Grid/Tailwind dynamic insertion at "next row", while still being responsive

【发布时间】：2021-09-27 11:44:43

【问题描述】：

我有一个使用 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 的第三项（因为详细信息行是单击的任何行下方的“注入”整行）

我是否可以只使用 CSS 网格来实现这一点，而不必诉诸大量基于屏幕大小在 javascript 中计算顺序的技巧？

【参考方案1】：

您可以做到这一点的一种方法是完全依赖 order 和响应式实用程序。当然，这种方法适用于您的示例，但很快就会失去动力，因为 Tailwind 的默认订单仅达到 12，并且您会发现自己在 Tailwind 配置中添加了大量新的订单变体......还有制作这个的算法在 20 多个网格项之后，基于元素的位置发生的情况会变得非常粗糙。

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

这是一个 Play 示例，展示了所有细节如何通过order 实用程序https://play.tailwindcss.com/tMHIF2Rpfy 的力量直接跟随它们的相关元素，同时按照屏幕尺寸放置在正确的位置中。