Home
rohit whyphy
masonary grids effect for cards using columns

masonary grids effect for cards using columns

As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).

This tailwind example is contributed by rohit whyphy, on 03-Mar-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are endorsement,review

Card Testimonial Other Grid

Author rohit whyphy

392

1

Fork Fullscreen

<div class="columns-2 md:columns-3 lg:columns-4 gap-4 m-4">
    <div class="break-inside-avoid bg-teal-300 rounded-lg shadow-md mb-4 text-teal-800 text-center font-bold p-3" style="height: 150px;">Card 1</div>
    <div class="break-inside-avoid bg-teal-300 rounded-lg shadow-md mb-4 text-teal-800 text-center font-bold p-3" style="height: 200px;">Card 2</div>
    <div class="break-inside-avoid bg-teal-300 rounded-lg shadow-md mb-4 text-teal-800 text-center font-bold p-3" style="height: 250px;">Card 3</div>
    <div class="break-inside-avoid bg-teal-300 rounded-lg shadow-md mb-4 text-teal-800 text-center font-bold p-3" style="height: 180px;">Card 4</div>
    <div class="break-inside-avoid bg-teal-300 rounded-lg shadow-md mb-4 text-teal-800 text-center font-bold p-3" style="height: 220px;">Card 5</div>
    <div class="break-inside-avoid bg-teal-300 rounded-lg shadow-md mb-4 text-teal-800 text-center font-bold p-3" style="height: 220px;">Card 6</div>
    <div class="break-inside-avoid bg-teal-300 rounded-lg shadow-md mb-4 text-teal-800 text-center font-bold p-3" style="height: 220px;">Card 7</div>
</div>

Related Examples

Responsive Grid with Featured image

Author:
_Amar_

2 years ago

11.7k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Author:
Amit Pachange

2 years ago

48.8k
Responsive Feature Card

Author:
Gopi Yadav

2 years ago

12.6k
Responsive Article Section

Author:
Prashant

2 years ago

14.6k
Products card grid
Example of product card grid with product image and pricing

Author:
Noob

2 years ago

21.4k
Info cards
Show various statistics on your website

Author:
Arya

2 years ago

10.9k
Customer testimonial card
Responsive user testimonial card with image

Author:
Arya

2 years ago

11.3k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

2 years ago

22.1k
Features grid

Author:
Sophia Baker

2 years ago

9.3k
Minimal Testimonial Card

Author:
Amit Pachange

2 years ago

8.2k
Testimonial card

Author:
Leon Bachmann

2 years ago

11.4k
Blog post cards
responsive blog post cards

Author:
Mr Robot

2 years ago

11.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1