Question 45924 in CSS Question posted in
Some basic documentation can be found here.

how to make cards one below another – CSS

I’m working on react typescript , and I have to display some projects (or jobs) in form of cards , but I want the cards to be displayed one below another this is the display

and this is the project component where I display the projects:

export function Project({ project }: { project: IProject }) {
  return (
  
          <Card title={project.title} bordered={true} className="Card-Project">
            <p>Description:{project.description}</p>
            <ul>
              Skills Required:
              {project.skillsRequired.map((skill, index) => (
                <li key={index}>{skill}</li>
              ))}
            </ul>
            <p> budget :{project.budget} CA$</p>
            <p>Experience Level: {project.experienceLevel}</p>
            <p>Category:{project.category}</p>
          </Card>
  )
}

this is the card project css file :

.Card-Project {
  width: 180%;
  margin: 0 auto;
  padding: 24px;
  margin-top: 20px;
  margin-left: 250px;
  margin-bottom: 20px;
  background-color: hwb(0 97% 0%);
}

I tried to put them one below another

Tags:

3

Answers


  1. 0

    The easyest way is put them in a div container what is flex, and set flex-direction to column like this:

     <div classname="container">
   Put the cards here...
 </div

    .container {
  display:flex;
  flex-direction: column;
}
    Login or Signup to reply.
  2. 0

    In your css, try adding display: block; property.

    .Card-Project {
  width: 180%;
  margin: 0 auto;
  padding: 24px;
  margin-top: 20px;
  margin-left: 250px;
  margin-bottom: 20px;
  background-color: hwb(0 97% 0%);
  display: block;
}
    Login or Signup to reply.
  3. 0

    you can try this

        .Card-Project {
      max-width: 500px;
      margin: 20px auto;
      padding: 24px;
      background-color: hwb(0 97% 0%);
      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search