Javascript Can'；不要正确渲染项目卡。Reactjs Gatsbyjs图形ql

我正在尝试使用gatsbyjs创建一个投资组合网站，目前我在使用graphql和gatsby image sharp创建项目卡时遇到了问题。我不确定这是我的css还是我的js

基本上，我有一个projects页面，它从本地JSON文件获取数据，然后将数据传递给card组件，然后在projects页面上呈现。我为卡片容器提供了css网格，但问题是卡片组件似乎无法识别网格，只是溢出了，或者它们只是在页面中向下/穿过页面。有点难以解释。还在学习啊哈。我只想在上面放三张牌，然后在下面放三张

项目页面

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

---

您的标记当前看起来像这样

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

但应该是这样的

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

网格项必须是网格的子项

.projects{
显示：网格；
网格模板列：重复（3，1fr）；
栅隙：10px；
背景颜色：浅灰色；
}
.项目项目{
边框：1px纯黑；
高度：80px；
背景：白色；
}

一个
两个
三
四
五
六

您的标记当前看起来像这样

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

但应该是这样的

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

网格项必须是网格的子项

.projects{
显示：网格；
网格模板列：重复（3，1fr）；
栅隙：10px；
背景颜色：浅灰色；
}
.项目项目{
边框：1px纯黑；
高度：80px；
背景：白色；
}

一个
两个
三
四
五
六

谢谢，我知道了。我之所以使用container div，是因为我试图嵌套网格以在边上留一个边距。我只是用保证金，而不是这样做，并使之简单。我想我得在网格上多读点东西。谢谢，我知道了。我之所以使用container div，是因为我试图嵌套网格以在边上留一个边距。我只是用保证金，而不是这样做，并使之简单。我想我得在网格上多读些东西。