Kevin Powell - Community•8mo ago

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

MarkBoots•8mo ago

on the card: break-inside: avoid;

Gold240sxOP•8mo ago

Thank you so much!

Gaming

Programming

Column wrap (clipping) using masonry

Did you find this page helpful?