如何使用Tailwind Grid将数据映射为指定两列布局

当前布局不符合预期的核心原因有两点：

• 仅给Grid容器设置了2列布局，没有指定第一个主色容器的跨行规则，Grid默认所有子元素仅占1行1列，3个子元素会按自动流顺序填充：第一个占第一行第一列、第二个占第二行第一列、第三个占第一行第二列，最终就会出现第一列堆叠2个容器、第二列仅1个容器的效果
• 给内部色块设置了固定宽度w-20、w-48，色块无法撑满所在Grid单元格的宽度，即使布局结构正确也会出现尺寸错位问题

通过Tailwind内置的Grid跨行类即可快速实现需求，核心改动如下：

• 给Grid容器增加grid-rows-2，明确划分2行的网格结构
• 给索引为0的主色外层容器添加row-span-2类，让它跨2行排布，占满第一列的全部高度
• 移除色块上写死的固定宽度类，替换为w-full让色块自动撑满父容器宽度，高度随单元格自适应

修正后的完整代码如下：

import { v4 as uuidv4 } from 'uuid';
import clsx from 'clsx';

const ColorPreview = ({ colors }: any) => {
  console.log('colors inside colorPreview', colors);

  return (
    <div className='grid grid-cols-2 grid-rows-2 gap-6'>
      {Object.keys(colors).map((key, index) => (
        <div 
          key={uuidv4()} 
          className={clsx(
            'overflow-hidden rounded-lg border-2',
            index === 0 && 'row-span-2'
          )}
        >
          <div
            className={clsx(
              'h-[6rem] w-full p-4',
              index === 0 && 'h-full p-4',
            )}
            style={{
              backgroundColor: colors[key],
            }}
          >
          </div>
          <p className='justify-center p-2 text-base'>{colors[key]}</p>
          {/* primary or secondary or tertiary*/}
        </div>
      ))}
    </div>
  );
};

拓展写法：如果不想手动给容器固定2行配置，也可以把容器类名替换为grid grid-cols-2 auto-rows-fr gap-6，让Grid自动生成的行高度自动平分，配合第一个元素的row-span-2属性也能实现相同效果，后续新增色块时不需要修改容器的行配置，灵活性更高。

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