在 Gatsby 中使用带有动态内容的网格模板区域

Question

我正在尝试使用 CSS 网格在每行上使用交替列进行布局。第一行左边是图片，右边是文字，第二行左边是文字，右边是图片，依此类推。

我尝试使用 nth-of-type，但是由于每个帖子的父节点（Box）重复，我认为这将非常困难。

问题是我无法单独联系所有孩子，因为内容来自 GraphQL，我只有一个节点要处理。

有人有建议来完成这个吗？

谢谢！

import React, { Component } from "react";
import { Link, graphql, StaticQuery } from 'gatsby'
import styled from 'styled-components'
import Img from 'gatsby-image'

const Wrapper = styled.div`
    margin: 0 auto;
    margin-bottom: 6rem;
    overflow: visible;
` 

const Title = styled.h5`
    margin-bottom: 2rem;
    text-align: center;
`

const Inner = styled.div`
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 3rem;

    @media (max-width: 1024px) {
        grid-template-columns: 1fr;
        grid-row-gap: 80px;
        padding: 1rem;
    }
`

const Box = styled.div`
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 6rem;
    align-items: center;

    grid-template-rows: auto;
    grid-template-areas: "left right";

    @media (max-width: 1024px) {
        grid-template-columns: 1fr;
        grid-row-gap: 80px;
        padding: 1rem;
    }
`

const Content = styled.div`
        text-decoration: none;

        &:nth-of-type(even){
            grid-area: right;
        }

        &:nth-of-type(odd){
            grid-area: left;
        }

`

const StyledLink = styled(Link)`
    text-decoration: none;
    color: inherit;

        :nth-of-type(even){
            grid-area: left;
        }

        :nth-of-type(odd){
            grid-area: right;
        }

`

const StyledImg = styled(Img)`
    border-radius: 7px;
    margin-bottom: 1rem;

    opacity: 1;
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;

        :hover {
            opacity: .7;
        }
`

const PostTitle = styled.h6`
    margin-bottom: 0.5rem;

`
const Date = styled.p`  
    font-size: 0.8rem;
    display: block;
    color: #777;

`


export class Gallery extends Component {

      render(){
        return (
            <Wrapper>
            <Title>
                Works
            </Title>
                <Inner>
                {this.props.data.allMarkdownRemark.edges.map(({ node }) => (
                    <Box key={node.id} className='box'>
                        <StyledLink to={node.fields.slug}>
                            <StyledImg fluid={node.frontmatter.image.childImageSharp.fluid} />
                        </StyledLink> 
                        <Content>
                            <StyledLink to={node.fields.slug}>
                                <PostTitle>
                                    {node.frontmatter.title}{" "}
                                </PostTitle>
                            </StyledLink>
                            <Date>
                            {node.frontmatter.date}
                            </Date>
                            <p>{node.excerpt}</p>
                        </Content>
                    </Box>
                ))}
                </Inner>
            </Wrapper>
        )
    }
}

export default props => (

    <StaticQuery
    query={graphql`
      query {
          allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
              totalCount
              edges {
              node {
                  id
                  frontmatter {
                  title
                  date(formatString: "DD MMMM, YYYY")
                  image {
                  childImageSharp {
                      fluid(maxWidth: 800) {
                      ...GatsbyImageSharpFluid_noBase64
                      }
                  }
              }
                  }
                  fields {
                  slug
                  }
                  excerpt
              }
              }
          }
          }
    `}
    render={data => <Gallery data={data} {...props} />}
    />
)
````

Answer 1

使用样式组件，您可以将 nth-of-type 提升到 Box 以定位其子项：

const Inner = styled.div`
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 1rem;
`;

// declare Image & Content first, so we can use it in Box 
const Image = styled.img`
  display: block;
`;

const Content = styled.div`
  display: block;
`;

const Box = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: "left right";

  & > ${Image}, 
  &:nth-of-type(even) > ${Content} {
    grid-area: left;
  }

  & > ${Content}, 
  &:nth-of-type(even) > ${Image} {
    grid-area: right;
  }
`;

这是一个最小的codesandbox

---

或者，您可以考虑只使用一个网格：

const Inner = styled.div`
  display: grid;
  grid-template-columns: repeat(2, 1fr);
`;

const Image = styled.img`
  grid-column: 1;
  &:nth-of-type(even) {
    grid-column: 2;
  }
`;

const Content = styled.div`
  grid-column: 2;
  &:nth-of-type(even) {
    grid-column: 1;
  }
`;

// use fragment (<>) so box is not rendered as a div
const Box = ({ content }) => (
  <>
    <Image src="https://via.placeholder.com/100x100" />
    <Content>{`item ${content}`}</Content>
  </>
)

另一个codesanbox

Answer 2

知道了！

这对我有用：

import React, { Component } from "react";
import { Link, graphql, StaticQuery } from 'gatsby'
import styled from 'styled-components'
import Img from 'gatsby-image'

const Wrapper = styled.div`
    margin: 0 auto;
    margin-bottom: 6rem;
    overflow: visible;
` 

const Title = styled.h5`
    margin-bottom: 2rem;
    text-align: center;
`

const Inner = styled.div`
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 3rem;

    @media (max-width: 1048px) {
        grid-template-columns: 1fr 1fr;
    }

    @media (max-width: 800px) {
        grid-template-columns: 1fr;
    }
`

const Box = styled.div`
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3rem;
    align-items: center; 

    ${Inner} &:nth-child(even) {
        grid-template-areas: 
        "right left";
    }

    ${Inner} &:nth-child(odd) {
        grid-template-areas: 
        "left right";
    }
`

const Thumb = styled(Link)`
    text-decoration: none;
    color: inherit;
    grid-area: left;
`

const Content = styled.div`
    text-decoration: none;
    grid-area: right;
`

const StyledLink = styled(Link)`
    text-decoration: none;
    color: inherit;
`

const StyledImg = styled(Img)`
    border-radius: 7px;
    margin-bottom: 1rem;
    opacity: 1;
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;

        :hover {
            opacity: .7;
        }
`

const PostTitle = styled.h6`
    margin-bottom: 0.5rem;

`

const Date = styled.p`  
    font-size: 0.8rem;
    display: block;
    color: #777;

`

export class Gallery extends Component {

      render(){
        return (
            <Wrapper>
            <Title>
                Works
            </Title>
                <Inner>
                {this.props.data.allMarkdownRemark.edges.map(({ node }) => (
                    <Box key={node.id} className='box' >
                        <Thumb to={node.fields.slug}>
                            <StyledImg fluid={node.frontmatter.image.childImageSharp.fluid} />
                        </Thumb> 
                        <Content>
                            <StyledLink to={node.fields.slug}>
                                <PostTitle>
                                    {node.frontmatter.title}{" "}
                                </PostTitle>
                            </StyledLink>
                            <Date>
                            {node.frontmatter.date}
                            </Date>
                            <p>{node.excerpt}</p>
                        </Content>
                    </Box>
                ))}
                </Inner>
            </Wrapper>
        )
    }
}

export default props => (

    <StaticQuery
    query={graphql`
      query {
          allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
              totalCount
              edges {
              node {
                  id
                  frontmatter {
                  title
                  date(formatString: "DD MMMM, YYYY")
                  image {
                  childImageSharp {
                      fluid(maxWidth: 800) {
                      ...GatsbyImageSharpFluid
                        base64
                        tracedSVG
                        aspectRatio
                      }
                  }
              }
                  }
                  fields {
                  slug
                  }
                  excerpt
              }
              }
          }
          }
    `}
    render={data => <Gallery data={data} {...props} />}
    />
)

谢谢！！