React / Gatsby: использование сетки CSS с чередующимся количеством столбцов в каждой строке - PullRequest
Новая
       9

React / Gatsby: использование сетки CSS с чередующимся количеством столбцов в каждой строке

0 голосов
/ 11 апреля 2020

Я пытаюсь создать сетку, которая чередует количество столбцов в каждой строке. Так, например, первая строка будет иметь один столбец, а вторая строка будет иметь два столбца, тогда как третья строка будет go возвращаться к одному столбцу. На данный момент у меня есть только сетка, которая имеет два столбца для каждой строки.

У кого-нибудь есть предложения, как это сделать? Спасибо!

Вот что у меня сейчас: 

<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>

1 Ответ

1 голос
/ 11 апреля 2020

Если вы хотите, чтобы строки из 1 столбца охватывали всю ширину следующим образом: 

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

Вместо этого: 

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

Тогда это должно быть довольно просто выполнить sh в попутном ветре CSS вот так: 

<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>
...