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;
}