如何用Tailwind CSS实现动态数量div每行显示2个？

你不需要手动给div分组，只需要调整父容器的Flex布局属性，就能自动实现每行2个元素的效果：

修改后的代码 #

<div class="flex flex-wrap gap-4">
  <div class="w-1/2 bg-red-500">w-first</div>
  <div class="w-1/2 bg-blue-500">w-second</div>
  <div class="w-1/2 bg-green-500">w-third</div>
  <div class="w-1/2 bg-yellow-500">w-fourth</div>
</div>

关键改动说明 #

• 把父容器的overflow-y-auto换成flex-wrap：这个属性会让Flex容器在子元素总宽度超过容器宽度时自动换行，不再横向滚动。
• 保留子元素的w-1/2：每个元素占容器宽度的一半，自然会每行排列2个，不管子元素数量多少，都会自动适配换行。
• 可选的gap-4：用来设置元素之间的间距，让布局更美观，你可以根据需求调整数值或者去掉这个类。

扩展：响应式适配 #

如果需要在移动端显示每行1个，平板及以上显示每行2个，只需要给子元素修改宽度类：

<div class="flex flex-wrap gap-4">
  <div class="md:w-1/2 w-full bg-red-500">w-first</div>
  <div class="md:w-1/2 w-full bg-blue-500">w-second</div>
  <!-- 其他元素同理 -->
</div>

内容的提问来源于stack exchange，提问作者Nisharga