I want to implement `col-span-2` in only the first image, How can I do that?
Unanswered
Argente Brun posted this in #help-forum
Argente BrunOP
import Image from "next/image";
const images = [
{
image: "/images/image1.jpg",
},
{
image: "/images/image2.jpg",
},
{
image: "/images/image3.jpg",
}
];
function Home() {
return (
<div className="grid gap-2 grid-cols-5 grid-wrap">
{images.map((image, index) => (
<div key={image.index}>
<Image
src={image.image}
alt=""
width={100}
height={100}
className={"border border-gray-250"}
/>
</div>
))}
</div>
);
}
export default Home;2 Replies
you can use your index and check if 0
you can do something like:
{images.map((image, index) => (
<div key={image.index}>
<Image
src={image.image}
alt=""
width={100}
height={100}
className={"border border-gray-250" + (index === 0 ? " col-span-2" : "")}
/>
</div>
))}