React / Gatsby：使用CSS网格，每行具有交替的列数

Question

我正在尝试创建一种网格布局，以交替显示每行中的列数。因此，例如，第一行将具有一列，第二行将具有两列，然后第三行将回到一列。此时，我只有一个网格，每一行都有两列。

任何人对此有任何建议吗？谢谢！

这是我现在拥有的：

<div className="grid grid-cols-2 gap-10">
  {projects.map(({ node }, index) => {
    const title = node.frontmatter.title || node.fields.slug
    const client = node.frontmatter.client
    const category = node.frontmatter.category
    const image = node.frontmatter.image.childImageSharp.fluid
    const description = node.frontmatter.description

    return (
      <div className="col-span-1">
        <Link to={node.fields.slug}>
          <BgImg fluid={image} className="h-104 bg-cover bg-no-repeat flex flex-col justify-end hover:shadow-2xl transition-all ease-linear duration-300" key={node.id}>
          </BgImg>
        </Link>
        <div className="py-5">
          <h3 className="text-2xl font-regular"><span className="font-semibold">{client}</span><span className="mx-1">&mdash;</span>{title}</h3>
          <p className="text-xl mb-4 font-light">{description}</p>
        </div>
      </div>
    )
  })}
</div>

Answer 1

如果您要让1列的行像这样横跨整个宽度：

[content] [content]
[      content    ]
[content] [content]

而不是这样：

[content] [content]
[content]
[content] [content]

然后这在TailwindCSS中应该非常简单，就像这样：

<div className="grid grid-cols-2 gap-10">
  {projects.map(({ node }, index) => {
    const title = node.frontmatter.title || node.fields.slug
    const client = node.frontmatter.client
    const category = node.frontmatter.category
    const image = node.frontmatter.image.childImageSharp.fluid
    const description = node.frontmatter.description

    return (
      <div className={index % 3 == 2 ? "col-span-2" : "col-span-1"}>
        <Link to={node.fields.slug}>
          <BgImg fluid={image} className="h-104 bg-cover bg-no-repeat flex flex-col justify-end hover:shadow-2xl transition-all ease-linear duration-300" key={node.id}>
          </BgImg>
        </Link>
        <div className="py-5">
          <h3 className="text-2xl font-regular"><span className="font-semibold">{client}</span><span className="mx-1">&mdash;</span>{title}</h3>
          <p className="text-xl mb-4 font-light">{description}</p>
        </div>
      </div>
    )
  })}
</div>