How do I separate react js cards?

Question

I want to separate them and line up horizontally and vertically

    import React from 'react'
import "./Projects.css";
import { Link } from 'react-router-dom';


function Projects({projectsData}) {
    return (
      <>
       {projectsData.map((index)=>{
           const{img,link,title}=index
           return(
            <div className="_div_">
              <div className="cards_">
              <div className="_imag">
                    <img src={img}/>
                    <div className="_writings">
                        <h1>{title}</h1>
                        <a href={link}> See Project</a>
                    </div>
                    

                </div>
              </div>

               
           </div>
           )
       })}
      </>
    )
}

export default Projects

._div_{
    background-color: #fff;
    height: 100vh;
    width: 100%;
    /* To adjust the height as well */
    height: fit-content;
 
    }

._imag{
    height: auto;
    width: 20%;
    background-color: rgb(183, 183, 204);
    border-radius: 9px;

}
._imag img{
    margin-top:0px;
    border-radius: 7px;
}

._writings{
    height: 40%;
    
}
.cards_{
    display: flex;
   align-items: center;
   flex-direction: row;
   justify-content: center;
}

import React from 'react'
import BodySection from "../Navbar/BodySection"
import Navbar from "../Navbar/Navbar"
import Content from "../Navbar/Content"
import {Data1,projectsData} from "./Data"
import Projects from "../Navbar/Projects"

function Home() {
    return (
        <>
          <BodySection/>  
          <Content{...Data1}/>
          <Projects projectsData={projectsData}/>

        </>
    )
}

export default Home

I want to separate the cards and put them horizontally and vertically and not just vertically. thank you. Please ignore what I am about to write because it wont let me post this saying I need to add more details but I dont have more details to add.

Answer 1

The top level should be the flex into which you map the cards, something like this:

function Projects({ projectsData }) {
  return (
    <div className="_div_">
       <div className="cards_">
      {projectsData.map((index) => {
        const { img, link, title } = index;
        return (
              <div className="_imag">
                <img src={img} />
                <div className="_writings">
                  <h1>{title}</h1>
                  <a href={link}> See Project</a>
                </div>
              </div>
        );
      })}
      </div>
   </div>
  );
}

You should probably have a card element together with these properties on cards_ to position them better: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap https://developer.mozilla.org/en-US/docs/Web/CSS/gap

Answer 2

This is a perfect use case for css flexbox. I threw together a quick codesandbox for you.

You can use my code as a starting point and expand out to your use case.

If you need a quick intro to flexbox here's a great video .