Search code examples
reactjstailwind-csstailwind-ui

How to render iterated items of map in two rows in React js

//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

I want to iterate these images in two rows with equal columns. how to do that. If possible, show me using tailwind css.


I iterate images and they render in one row. and size of the images is also not increasing when displaying in one row

enter image description here

But I want to show them like this enter image description here

Solution

  • You could consider using a CSS grid by applying display: grid via the grid Tailwind class. Have five equally sized grid column tracks via the grid-cols-5 Tailwind class. Optionally, have some spacing between each item by applying gap via a gap-* Tailwind class.

    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>