I need help creating a dynamic grid layout where the number of columns alternates between rows. For example, I want the first row to have one column, the second row to have two columns, and so on. Right now, my grid only has two columns per row. Does anyone know how I can achieve this? Thank you!
Current code snippet:
<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">—</span>{title}</h3>
<p className="text-xl mb-4 font-light">{description}</p>
</div>
</div>
)
})}
</div>