Grid Cols

[outer wolf]

Hello Guys,

I'm currently working on a Nextjs project where I need to implement a specific grid layout for a set of cards. I've been trying to use Tailwind CSS to achieve the desired design, but I'm encountering some difficulties with the col-span classes and ensuring that the cards align as per the design.

I have an array of card data that I'm mapping over to create a grid of cards. The first and last cards need to span two columns, while the middle two cards should span one column each. Despite the try, the layout isn't coming together as expected.

I've tried using a switch case to apply different col-span classes based on the card's ID, but it's not working out. I'm looking for guidance on how to correctly implement this grid system or any alternative solutions that might help me achieve the layout as shown in the design image I have.

Any help or suggestions would be greatly appreciated !!!

[bold talon]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[fringe pier]

const data = [
  {
    id: 1,
    name: "Content 1",
    span: "col-span-1",
  },
  {
    id: 2,
    name: "Content 2",
    span: "col-span-2",
  },
  {
    id: 3,
    name: "Content 3",
    span: "col-span-2",
  },
  {
    id: 4,
    name: "Content 4",
    span: "col-span-1",
  },
]

export default function Page() {
  return (
    <div className="grid grid-cols-3 gap-4">
      {data.map((item) => (
        <div className={`${item.span} h-60 content-center bg-blue-700 text-center` } 
        key={item.id}>
          {item.name}
        </div>
      ))}
    </div>
  )
}

Results in (screenshot) .
Note that you can not use string concat like col-span-${var} in tailwind.
More info: https://tailwindcss.com/docs/content-configuration#dynamic-class-names

[outer wolf]

Thanks mate, I appreciate your help, your approach is very clear and easy