Next.js Discord

Discord Forum

Grid Cols

Answered
Pixiebob posted this in #help-forum
Open in Discord
PixiebobOP
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 !!!
Answered by American Crow
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
View full answer

2 Replies

American Crow
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
Answer
PixiebobOP
Thanks mate, I appreciate your help, your approach is very clear and easy