Tailwind CSS布局问题：两行四等分Div仅首行带边距的实现

需求说明 #

想要实现如下布局：

需要创建一个包含两行的布局，每行四个等宽元素，仅第一行的元素带有边距，同时要保证响应式效果。

原代码存在响应式不足、布局逻辑不够优雅的问题：

<div className="w-full max-w-5xl relative my-10">
        <div className="pt-9">
          <div className="w-full grid grid-cols-4 text-center text-primaryPurple gap-x-10 absolute top-0 capitalize font-bold text-xl overflow-hidden">
            <span className="bg-[#FF9900] rounded-t-xl py-1">rank</span>
            <span className="bg-[#FF9900] rounded-t-xl py-1">account</span>
            <span className="bg-[#FF9900] rounded-t-xl py-1">date</span>
            <span className="bg-[#FF9900] rounded-t-xl py-1">likes</span>
          </div>
          <div className="grid grid-cols-4 text-center text-white font-bold text-2xl gap-x-10 bg-primaryPurple capitalize py-5 rounded-b-xl">
            <span>213th</span>
            <span>2024/12/2</span>
            <span>5</span>
            <span>84</span>
          </div>
        </div>
      </div>

优化后的实现方案 #

下面是更简洁、响应式表现更好的代码：

<div className="w-full max-w-5xl my-10">
  {/* 表头行 */}
  <div className="grid grid-cols-4 gap-4">
    <div className="bg-[#FF9900] rounded-t-xl py-2 text-center font-bold text-xl text-primaryPurple capitalize">rank</div>
    <div className="bg-[#FF9900] rounded-t-xl py-2 text-center font-bold text-xl text-primaryPurple capitalize">account</div>
    <div className="bg-[#FF9900] rounded-t-xl py-2 text-center font-bold text-xl text-primaryPurple capitalize">date</div>
    <div className="bg-[#FF9900] rounded-t-xl py-2 text-center font-bold text-xl text-primaryPurple capitalize">likes</div>
  </div>
  {/* 内容行 */}
  <div className="grid grid-cols-4 bg-primaryPurple rounded-b-xl py-5">
    <div className="text-center text-white font-bold text-2xl">213th</div>
    <div className="text-center text-white font-bold text-2xl">2024/12/2</div>
    <div className="text-center text-white font-bold text-2xl">5</div>
    <div className="text-center text-white font-bold text-2xl">84</div>
  </div>
</div>

优化要点 #

• 移除了不必要的relative和absolute定位，改用自然流布局，避免定位导致的布局偏移问题
• 表头行用gap-4设置列间距（即需求中的第一行边距），内容行不设置gap，保证和表头列完全对齐
• 统一使用div代替span，语义更清晰，同时避免行内元素的默认样式限制
• 调整表头内边距py-2让高度更协调，保留内容行的py-5维持视觉层次
• 如需移动端响应式适配，可添加断点类实现自动换行：

  // 表头行修改为
  <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
  // 内容行修改为
  <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 bg-primaryPurple rounded-b-xl py-5">
  

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