Блог

Я хочу разделить их и выстроить по горизонтали и вертикали

     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
 

Я хочу разделить карты и расположить их горизонтально и вертикально, а не только вертикально.
Спасибо.
Пожалуйста, не обращайте внимания на то, что я собираюсь написать, потому что это не позволит мне опубликовать это сообщение, в котором говорится, что мне нужно добавить больше деталей, но у меня нет дополнительных деталей для добавления.

Верхний уровень должен быть гибким, в который вы сопоставляете карты, что-то вроде этого:

 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>
  );
}

 

Вероятно, вам следует иметь элемент карты вместе с этими свойствами cards_ , чтобы лучше их расположить:
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
https://developer.mozilla.org/en-US/docs/Web/CSS/gap

Это идеальный вариант использования css flexbox. Я собрал для вас быстрый кодовый ящик.

Вы можете использовать мой код в качестве отправной точки и расширить его до вашего варианта использования.

Если вам нужно краткое введение в flexbox, вот отличное видео.