Creating a responsive e-commerce layout is a great way to showcase your skills with Flexbox and CSS Grid. Here’s a breakdown of how to design a clean, mobile-friendly layout using these tools.
Key Features of the Layout
- Header: Includes a logo, navigation bar, and a search bar.
- Hero Section: A full-width banner or promotional image.
- Product Grid: Displays products in a responsive grid layout.
- Footer: Contains links, contact info, and social media icons.
Building the Layout
HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-commerce Layout</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="header">
<div class="logo">ShopLogo</div>
<nav class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="search-bar">
<input type="text" placeholder="Search products...">
</div>
</header>
<section class="hero">
<h1>Welcome to Our Shop</h1>
<p>Find the best deals on your favorite products!</p>
</section>
<main class="products">
<article class="product-card">
<img src="product1.jpg" alt="Product 1">
<h2>Product 1</h2>
<p>$10.99</p>
</article>
<article class="product-card">
<img src="product2.jpg" alt="Product 2">
<h2>Product 2</h2>
<p>$15.99</p>
</article>
<article class="product-card">
<img src="product3.jpg" alt="Product 3">
<h2>Product 3</h2>
<p>$20.99</p>
</article>
<!-- Add more product cards -->
</main>
<footer class="footer">
<p>© 2025 ShopLogo. All rights reserved.</p>
</footer>
</body>
</html>
CSS Styling with Flexbox and Grid
/* General Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
/* Header */
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background-color: #333;
color: white;
}
.header .logo {
font-size: 1.5rem;
font-weight: bold;
}
.header .nav ul {
display: flex;
list-style: none;
}
.header .nav ul li {
margin: 0 1rem;
}
.header .nav ul li a {
color: white;
text-decoration: none;
}
.header .search-bar input {
padding: 0.5rem;
border: none;
border-radius: 4px;
}
/* Hero Section */
.hero {
text-align: center;
padding: 2rem;
background-color: #f4f4f4;
}
.hero h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.hero p {
font-size: 1.2rem;
color: #666;
}
/* Product Grid */
.products {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
padding: 2rem;
}
.product-card {
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
text-align: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.product-card img {
width: 100%;
height: auto;
}
.product-card h2 {
font-size: 1.2rem;
margin: 1rem 0;
}
.product-card p {
color: #007BFF;
font-weight: bold;
margin-bottom: 1rem;
}
/* Footer */
.footer {
text-align: center;
padding: 1rem;
background-color: #333;
color: white;
}
/* Responsive Design */
@media (max-width: 768px) {
.header {
flex-wrap: wrap;
}
.header .search-bar {
margin-top: 1rem;
width: 100%;
}
.products {
grid-template-columns: 1fr;
}
}
Features Demonstrated
- Flexbox: Used in the header to align the logo, navigation bar, and search bar.
- Grid Layout: Used for the product grid, automatically adjusting the number of columns based on the viewport width.
- Responsive Design: Implemented using
@mediaqueries to ensure proper display on smaller screens. - Styling: Styled cards with borders, shadows, and hover effects for a polished look.
Applications of This Layout
- E-commerce Websites: Build online stores with clean product displays.
- Portfolio Projects: Use the grid to showcase your projects or services.
- Responsive Templates: Modify for blogs, galleries, or dashboards.
Read More:
- Introduction to CSS: The Foundation of Modern Web Design
- Understanding HTML: The Backbone of Web Pages
This layout demonstrates how Flexbox and Grid can work together seamlessly to create responsive, visually appealing designs. Start by building this structure, then expand it with additional features like filters, sorting, or animations to enhance the user experience.
