Can't render project cards properly. Reactjs Gatsbyjs Graphql

Brandon :

I'm trying to make a portfolio site using gatsbyjs and I'm currently having problems creating project cards using graphql and gatsby image sharp. I'm not sure if it's just my css or my js.

Basically I have a projects page that is getting data from a local JSON file and then passing the data to a card component which is then rendered on the projects page. I have css grid for the card container but the problem is the cards component doesn't seem to recognize the grid and just spills out or they just goes down/across the page. Kinda hard to explain. Still learning aha. I just want 3 cards on top and then 3 on the bottom.

https://github.com/verv0022/portfolio

they seem to take up the entire grid space even though i have a width?

Project Page

const Projects = () => {
const data = useStaticQuery(graphql`
 query ProjectsQuery {
  allProjectsJson {
    edges {
      node {
        id
        name
        description
        url
        image {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
}


 `)
   const projects = data.allProjectsJson.edges

   console.log(projects)

     return (
    <section className="projects">
      <main className="projects-content">
        <ScrollAnimation
          className="projects-title"
          animateOnce={true}
          animateIn="slideInLeft"
          animatePreScroll={false}
          initiallyVisible={false}
        >
          <h2>Here are some of my projects...</h2>
          </ScrollAnimation>

        <section className="project-preview-container">
          <div className="project-preview-item-container">
            {projects.map(({ node: project }) => {
              return (
                <ProjectPreviewItem
                  key={project.id}
                  name={project.name}
                  description={project.description}
                  imageData={project.image.childImageSharp.fluid}
                  url={project.url}
                />
              )
            })}
          </div>
        </section>
      </main>
    </section>
  )
}

export default Projects

Card Component

import React from "react"
import Image from "gatsby-image"
import "./Projects.css"

const ProjectPreviewItem = ({ name, imageData, description, url }) => {
  return (
    <div className="project-item">
      <div className="image-container">
        <Image fluid={imageData} alt={name} className="project-img"></Image>
      </div>
      <div className="project-item-details">
        <h2 className="project-url">
          <a href={url}>{name}</a>
        </h2>
        <p className="project-description">{description}</p>
      </div>
    </div>
  )
}

export default ProjectPreviewItem

CSS

body,
html {
  margin: 0;
  padding: 0;
}
* {
  box-sizing: border-box;
}

.projects {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  display: grid;
  height: 100vh;
}

.projects-content {
  grid-area: 2 / 2 / 6 / 6;
}

.projects-title {
  font-size: 26px;
}

.project-preview-container {
  grid-area: 3 / 2 / 6 / 6;
  margin-top: 6rem;
  background-color: lightgray;
}

/* .project-preview-item-container {

} */

.projects-title {
  width: 40rem;
}

.project-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: black solid 2px;
  padding: 1rem;
  margin: 1rem;
  width: 250px;
  height: auto;
}

.project-item-details {
  margin-top: 20px;
}

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

ksav :

Your markup looks something like this currently.

.projects
    .projects-content
      .project-preview-container
        .project-item
        .project-item
        .project-item

But should be something like.

.projects
  .project-item
  .project-item
  .project-item

Grid items must be children of the grid.

.projects {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  background-color: lightgray;
}

.project-item {
  border: 1px solid black;
  height: 80px;
  background: white;
}

<div class="projects">
  <div class="project-item">One</div>
  <div class="project-item">Two</div>
  <div class="project-item">Three</div>
  <div class="project-item">Four</div>
  <div class="project-item">Five</div>
  <div class="project-item">Six</div>
</div>

Have a read of the Basic Concepts of Grid Layout