Column wrap (clipping) using masonry
Just trying to figure out how to prevent object clipping. The column is breaking mid-component and splitting onto the next column ( see top of column 2 - it's a continuation of the bottom of column 1).. I'm sure there's something simple to change this. I'll put together a codepen if needed... (Using tailwind of course)
// parent component
{/* Reviews */}
<h2 className="text-5xl text-center mt-16">Reviews</h2>
<div className="bg-white rounded shadow-2xl shadow-black min-h-64 w-full mt-4 p-4 columns-1 md:columns-2 lg:columns-3 items-start">
{featuredReviews.map((review, index) => {
return <ReviewCard key={index} props={totalReview} />
})}
</div>
// parent component
{/* Reviews */}
<h2 className="text-5xl text-center mt-16">Reviews</h2>
<div className="bg-white rounded shadow-2xl shadow-black min-h-64 w-full mt-4 p-4 columns-1 md:columns-2 lg:columns-3 items-start">
{featuredReviews.map((review, index) => {
return <ReviewCard key={index} props={totalReview} />
})}
</div>
/// review card
<div className=" bg-zinc-200 h-fit rounded p-8 px-6 mb-4 text-black ease-in-out duration-300 transition-all">
<header className="flex justify-between">]
<div
id={`card-basics-${index}`}
className="gap-4 flex items-center">
<div
id={`card-user-icon-${index}`}
className="rounded-full">
<img
src={image.src}
alt="user icon"
className="h-12 w-12"
/>
</div>
<div
id={`card-reviewee-and-date-${index}`}
className="flex gap-2s flex-col">
<div
id={`card-user-name-${index}`}
className="font-semibold text-xl"
>
{reviewee}
</div>
<div id={`card-review-date-${index}`}>
{date}
</div>
</div>
</div>
<div
id={`card-platform-${index}`}
className="rounded-full"
>
<Image
src={platformIcon()}
alt={platform}
height={24}
width={24}
/>
</div>
</header>
<div
id={`card-rating-${index}`}
className="py-2"
>
<FiveStarsRating props={{ score: rating, starSize: 14, animated: false }}/>
</div>
<div
id={`card-description-${index}`}
className="overflow-ellipsis"
>
{description}
</div>
</div>
/// review card
<div className=" bg-zinc-200 h-fit rounded p-8 px-6 mb-4 text-black ease-in-out duration-300 transition-all">
<header className="flex justify-between">]
<div
id={`card-basics-${index}`}
className="gap-4 flex items-center">
<div
id={`card-user-icon-${index}`}
className="rounded-full">
<img
src={image.src}
alt="user icon"
className="h-12 w-12"
/>
</div>
<div
id={`card-reviewee-and-date-${index}`}
className="flex gap-2s flex-col">
<div
id={`card-user-name-${index}`}
className="font-semibold text-xl"
>
{reviewee}
</div>
<div id={`card-review-date-${index}`}>
{date}
</div>
</div>
</div>
<div
id={`card-platform-${index}`}
className="rounded-full"
>
<Image
src={platformIcon()}
alt={platform}
height={24}
width={24}
/>
</div>
</header>
<div
id={`card-rating-${index}`}
className="py-2"
>
<FiveStarsRating props={{ score: rating, starSize: 14, animated: false }}/>
</div>
<div
id={`card-description-${index}`}
className="overflow-ellipsis"
>
{description}
</div>
</div>
2 Replies