Back to Examples

E-commerce Layout Example

A responsive e-commerce product grid layout with filters sidebar. Features product cards, category filters, and price range selector. Demonstrates how to use flexbox for both the main layout and individual product cards.

PREVIEW

Categories

Price Range

$0 $1000

Rating

★★★★★ (5)
★★★★☆ (4)
★★★☆☆ (3)
24 Products

Product 1

Short product description...

$99.99

Product 2

Short product description...

$99.99

Product 3

Short product description...

$99.99

Product 4

Short product description...

$99.99

Product 5

Short product description...

$99.99

Product 6

Short product description...

$99.99

CODE

/* Main Layout */
    .shop-container {
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }

    @media (min-width: 1024px) {
      .shop-container {
        flex-direction: row;
      }
    }

    /* Sidebar */
    .filters-sidebar {
      width: 100%;
    }

    @media (min-width: 1024px) {
      .filters-sidebar {
        width: 25%;
      }
    }

    /* Product Grid */
    .products-grid {
      display: grid;
      gap: 1.5rem;
      grid-template-columns: repeat(1, 1fr);
    }

    @media (min-width: 640px) {
      .products-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 1024px) {
      .products-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    /* Product Card */
    .product-card {
      display: flex;
      flex-direction: column;
    }

    .product-card-content {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
    }