render Multidimensional array react js

Question

how do display the array of the card in two columns instead of one with an image displaying sequentially?

return  (
    <div>
     
      {
        data?.length > 0 && data?.map(item=>{
          return(                
              <div className='home-container'>                    
                <div className='card-image-container'>
                  <img className='card-image'  alt="blank" src={item.photo} />
                </div>
                <div className='card-content'>               
                <h6 className='home-card-title'>{item.title} </h6>
                  <p className='home-card-desc'>{item.body}</p>                    
                </div>
              </div>
            
          )
        })
      }         
     </div>
  );

can someone tell me how to implement a multi-dimensional array in this?

Answer 1

You can try using grid in css

#grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

return  (
    <div id='grid-container'>
     
      {
        data?.length > 0 && data?.map(item=>{
          return(                
              <div className='home-container'>                    
                <div className='card-image-container'>
                  <img className='card-image'  alt="blank" src={item.photo} />
                </div>
                <div className='card-content'>               
                <h6 className='home-card-title'>{item.title} </h6>
                  <p className='home-card-desc'>{item.body}</p>                    
                </div>
              </div>
            
          )
        })
      }         
     </div>
  );

To add padding/styling to the grid, you can check out more options here