如何在React中用Tailwind CSS将Map遍历的图片分为两行展示

要把10张公司图片分成两行、每行列数均等（每行5张），同时让图片尺寸正常可控，只需要修改CompaniesMain.jsx里的容器布局类，替换原来的flex为grid即可，具体代码如下：

// CompaniesMain.jsx
import { companies } from '../assets/assets'

const CompaniesMain = () => {
  return (
    <div className='grid grid-cols-5 gap-4 p-10 w-full'>
        {companies.map((company, index) => {
            return <img 
                key={index} 
                className='w-full max-w-[15rem] object-contain' 
                src={company} 
                alt={`company-logo-${index}`} 
            />
        })}
    </div>
  )
}

export default CompaniesMain

关键修改说明： #

• 外层容器替换为grid grid-cols-5：直接指定每行5列，10张图会自动分成两行，完美匹配均等布局需求
• gap-4：设置图片之间的间距，可根据视觉需求调整数值（比如gap-6）
• 图片样式调整：
  • w-full让图片自适应所在网格单元格的宽度
  • max-w-[15rem]限制图片最大宽度，避免尺寸失控
  • object-contain保证图片完整显示，不会被拉伸变形
• 补充alt属性的有意义内容，提升页面可访问性

assets.js的代码无需修改，保持原样即可。

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