FLEXBOX GENERATOR

Back to Examples

Card Grid Layouts

Various card grid layouts using flexbox. Features responsive grids with different card sizes, masonry-style layouts, and dynamic spacing. Perfect for portfolios, product showcases, and content collections.

PREVIEW

Card 1

Sample card content demonstrating flexible sizing and responsive layout.

Card 2

Sample card content demonstrating flexible sizing and responsive layout.

Card 3

Sample card content demonstrating flexible sizing and responsive layout.

Card 4

Sample card content demonstrating flexible sizing and responsive layout.

Card 5

Sample card content demonstrating flexible sizing and responsive layout.

Card 6

Sample card content demonstrating flexible sizing and responsive layout.

Featured Card

A larger featured card that stands out in the grid layout.

Card 1

Regular card content.

Card 2

Regular card content.

Card 3

Regular card content.

Card 4

Regular card content.

Masonry Card

Variable height card content.

Masonry Card

Variable height card content.

Masonry Card

Variable height card content.

Masonry Card

Variable height card content.

Masonry Card

Variable height card content.

Masonry Card

Variable height card content.

CODE

/* Basic Card Grid */
    .card-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem;
    }

    .card {
      flex: 1 1 16rem;
    }

    /* Featured Card Grid */
    .featured-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem;
    }

    .featured-card {
      flex: 1 1 24rem;
    }

    .regular-card {
      flex: 1 1 12rem;
    }

    /* Masonry Grid */
    .masonry-grid {
      columns: 3;
      gap: 1.5rem;
    }

    @media (max-width: 1024px) {
      .masonry-grid {
        columns: 2;
      }
    }

    @media (max-width: 768px) {
      .masonry-grid {
        columns: 1;
      }
    }

    .masonry-item {
      break-inside: avoid;
      margin-bottom: 1.5rem;
    }