如何用Tailwind CSS v3实现响应式布局元素等距且首尾对齐

我正在使用Next.js与Tailwind CSS开发项目，现有8张不同尺寸的图片，需实现响应式布局：

• 中等及以上尺寸设备每行显示4张
• 小尺寸设备每行显示2张
  要求每行元素间保持相等间距，首元素靠左、尾元素靠右，其余元素间距均匀。请问能否直接通过Tailwind CSS实现该效果？

API返回的JSON数据：

const ourPartners = [
    {
        id: "partner01",
        pic: partner_01
    },
    {
        id: "partner02",
        pic: partner_02,
    },
    {
        id: "partner03",
        pic: partner_03,
    },
    {
        id: "partner04",
        pic: partner_04,
    },
    {
        id: "partner05",
        pic: partner_05,
    },
    {
        id: "partner06",
        pic: partner_06,
    },
    {
        id: "partner07",
        pic: partner_07,
    },
    {
        id: "partner08",
        pic: partner_08,
    }
]

当前数组映射代码：

<div className="flex flex-row flex-wrap justify-between items-center">
    {
        ourPartners.map((item, index) => {
            return (
                <div className={`md:w-1/4 w-1/2 mb-10 ${(index % 4 !== 0 ? ('flex justify-center') : ('flex justify-start'))}`} key={item.id}>
                    <div className="w-32 object-contain">
                        <Image
                            alt="partner"
                            width="auto"
                            height="auto"
                            src={item.pic}
                            quality={100}
                        />
                    </div>
                </div>
            )
        })
    }
</div>

完全可以直接用Tailwind CSS实现这个需求，且无需通过index判断对齐方式，以下两种方案都能简洁满足要求：

方案1：Flex布局优化 #

通过gap统一控制间距，结合响应式宽度计算，让布局自动满足首尾对齐、中间间距均匀的要求：

<div className="flex flex-wrap justify-between gap-x-4 gap-y-10">
  {ourPartners.map((item) => (
    <div className="md:w-[calc(25%-3px)] w-[calc(50%-2px)] flex justify-center" key={item.id}>
      <div className="w-32 object-contain">
        <Image
          alt="partner"
          width="auto"
          height="auto"
          src={item.pic}
          quality={100}
        />
      </div>
    </div>
  ))}
</div>

• gap-x-4/gap-y-10替代手动设置的mb-10，统一控制元素间的水平、垂直间距
• 宽度计算逻辑：中等屏幕每行4个元素，存在3个水平间距，因此每个元素宽度为25% - 3px；小屏幕每行2个元素，存在1个水平间距，宽度为50% - 2px
• flex justify-center确保不同尺寸的图片在容器内居中，避免布局错位

方案2：Grid布局（更直观简洁） #

Grid布局天生适配这种响应式列数控制，代码更易维护：

<div className="grid grid-cols-2 md:grid-cols-4 gap-10">
  {ourPartners.map((item) => (
    <div className="flex justify-center" key={item.id}>
      <div className="w-32 object-contain">
        <Image
          alt="partner"
          width="auto"
          height="auto"
          src={item.pic}
          quality={100}
        />
      </div>
    </div>
  ))}
</div>

• grid-cols-2/md:grid-cols-4直接定义不同屏幕下的每行列数
• gap-10统一控制元素间的水平、垂直间距
• Grid布局自动实现首尾元素对齐、中间间距均匀的效果，无需额外逻辑

说明：原代码中通过index%4判断对齐的方式冗余且易出问题（比如元素数量非4的倍数时布局错乱），上述两种方案均能完美规避该问题，且更符合Tailwind的设计理念。

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