如何在React js中渲染两行map的迭代项

Question

//assets.js
import sorare from './sorare.svg'
import visa from './visa.svg'
import sling from './sling.svg'
import safety_wing from './safety-wing.svg';
import unqork from './Un_qork.svg';
import stitch from './stitch.svg'
import xp from './X_P.svg'
import overwolf from './overwolf.svg'
import revio from './revio.svg'
import humaans from './humaans.svg'

export const companies = [
    sorare,
    visa,
    sling,
    safety_wing,
    unqork,
    stitch,
    xp,
    overwolf,
    revio,
    humaans,
]

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

const CompaniesMain = () => {
  return (
    <div className='flex p-10 w-[100%]'>
        {companies.map((company,index)=>{
            return <img key={index} className='w-[15rem]' src={company} alt="" />
        })}
    </div>
  )
}

export default CompaniesMain

我想在具有相等列的两行中迭代这些图像。怎么做。如果可能的话，请告诉我如何使用 tailwind css。

我迭代图像并将它们呈现在一行中。当以一行显示时，图像的大小也不会增加

但我想像这样向他们展示

Answer 1

您可以考虑通过 display: grid

 Tailwind 类

应用 grid

来使用 

CSS 网格。通过

grid-cols-5

Tailwind 类 有五个同等大小的网格柱轨道。 （可选）通过

gap

Tailwind 类应用

gap-*

，在每个项目之间留出一些间距。

const companies = Array(10).fill().map((_, i) => `https://picsum.photos/500/300?${i}`);

const CompaniesMain = () => {
  return (
    <div className='grid grid-cols-5 gap-4 p-10 w-[100%]'>
      {companies.map((company,index)=>{
        return <img key={index} className='w-[15rem]' src={company} alt="" />
      })}
    </div>
  )
}

ReactDOM.createRoot(document.getElementById('app')).render(<CompaniesMain/>);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js" integrity="sha512-QVs8Lo43F9lSuBykadDb0oSXDL/BbZ588urWVCRwSIoewQv/Ewg1f84mK3U790bZ0FfhFa1YSQUmIhG+pIRKeg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js" integrity="sha512-6a1107rTlA4gYpgHAqbwLAtxmWipBdJFcq8y5S/aTge3Bp+VAklABm2LO+Kg51vOWR9JMZq1Ovjl5tpluNpTeQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<div id="app"></div>