I'm having an issue with a grid that is not behaving as expected. I have set up a jsfiddle to show the behavior I am looking for, which relies on the responsive code: col-span-3 md:col-span-2 for one of the items.
The problem arises when I inspect the HTML and see that the dynamic breakpoints col-spans are present, but they are not working correctly when the viewport expands. What could be causing this issue?
This is how my component is wrapped:
<div className="max-w-5xl">
<div className="grid grid-cols-6 gap-10 p-6">
{
supportedArray.map((card, idx) => <SupportCard key={idx} {...card} />
)}
</div>
</div>
Here is my SupportCard component:
import { ISupportCard } from "~/types"
const SupportCard = (card: ISupportCard) => {
return (
<div className={`bg-white card shadow-xl aspect-[portrait] overflow-hidden rounded-t-xl rounded-b-3xl col-span-${card.mobileSpan} md:col-span-${card.colSpan} ${card.customClasses ?? ""}`}>
<div className="relative">
<img className={`w-full h-full object-cover ${card.imgClasses ?? ""}`} src={card.image} alt={card.alt_text ?? card.title} />
<h3 className="absolute text-neutralBlack bottom-0 flex justify-center items-center text-lg md:text-2xl font-bold bg-[rgba(255,255,255,0.5)] w-full card-title p-3 backdrop-blur">{card.title}</h3>
</div>
<div className="relative card-body hidden md:flex flex-1">
<p className="text-xl font-medium">{card.copy}</p>
</div>
</div>
)
}
export default SupportCard
This is the structure of the data sent to the component:
export interface ISupportCard {
imgClasses?: string
colSpan: number
mobileSpan: number
customClasses?: string
title: string
image: string
alt_text?: string
copy: string
}
One of the objects looks like this:
{
colSpan: 6,
mobileSpan: 3,
imgClasses: "aspect-square md:aspect-auto object-[40%] md:object-fill",
title: "Organizations",
image: "/images/cards/support-organizations.jpg",
alt_text: "Organizations",
copy: `Copy...`
}