Here's a responsive product grid implementation using HTML and CSS, based on the provided product list:

Product Grid HTML with CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Catalog</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }

        body {
            background-color: #f8f9fa;
            padding: 2rem 0;
        }

        .product-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 2rem;
        }

        .product-card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            overflow: hidden;
            transition: transform 0.3s ease;
        }

        .product-card:hover {
            transform: translateY(-5px);
        }

        .product-image {
            width: 100%;
            height: 180px;
            object-fit: cover;
        }

        .product-details {
            padding: 1.5rem;
            text-align: center;
        }

        .product-name {
            font-size: 1.1rem;
            color: #333;
            margin-bottom: 0.8rem;
        }

        .product-price {
            font-size: 1.2rem;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 1rem;
        }

        .add-to-cart {
            background-color: #27ae60;
            color: white;
            border: none;
            padding: 0.7rem 1.2rem;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .add-to-cart:hover {
            background-color: #219653;
        }
    </style>
</head>
<body>
    <div class="product-container">
        <!-- Product A -->
        <div class="product-card">
            <img src="https://via.placeholder.com/220x180?text=A" alt="Product A" class="product-image">
            <div class="product-details">
                <h3 class="product-name">A</h3>
                <p class="product-price">$10</p>
                <button class="add-to-cart">Add to cart</button>
            </div>
        </div>

        <!-- Product B -->
        <div class="product-card">
            <img src="https://via.placeholder.com/220x180?text=B" alt="Product B" class="product-image">
            <div class="product-details">
                <h3 class="product-name">B</h3>
                <p class="product-price">$20</p>
                <button class="add-to-cart">Add to cart</button>
            </div>
        </div>

        <!-- Product C -->
        <div class="product-card">
            <img src="https://via.placeholder.com/220x180?text=C" alt="Product C" class="product-image">
            <div class="product-details">
                <h3 class="product-name">C</h3>
                <p class="product-price">$30</p>
                <button class="add-to-cart">Add to cart</button>
            </div>
        </div>

        <!-- Product D -->
        <div class="product-card">
            <img src="https://via.placeholder.com/220x180?text=D" alt="Product D" class="product-image">
            <div class="product-details">
                <h3 class="product-name">D</h3>
                <p class="product-price">$40</p>
                <button class="add-to-cart">Add to cart</button>
            </div>
        </div>

        <!-- Product E -->
        <div class="product-card">
            <img src="https://via.placeholder.com/220x180?text=E" alt="Product E" class="product-image">
            <div class="product-details">
                <h3 class="product-name">E</h3>
                <p class="product-price">$50</p>
                <button class="add-to-cart">Add to cart</button>
            </div>
        </div>

        <!-- Product F -->
        <div class="product-card">
            <img src="https://via.placeholder.com/220x180?text=F" alt="Product F" class="product-image">
            <div class="product-details">
                <h3 class="product-name">F</h3>
                <p class="product-price">$60</p>
                <button class="add-to-cart">Add to cart</button>
            </div>
        </div>

        <!-- Product G -->
        <div class="product-card">
            <img src="https://via.placeholder.com/220x180?text=G" alt="Product G" class="product-image">
            <div class="product-details">
                <h3 class="product-name">G</h3>
                <p class="product-price">$70</p>
                <button class="add-to-cart">Add to cart</button>
            </div>
        </div>

        <!-- Product H -->
        <div class="product-card">
            <img src="https://via.placeholder.com/220x180?text=H" alt="Product H" class="product-image">
            <div class="product-details">
                <h3 class="product-name">H</h3>
                <p class="product-price">$80</p>
                <button class="add-to-cart">Add to cart</button>
            </div>
        </div>

        <!-- Product I -->
        <div class="product-card">
            <img src="https://via.placeholder.com/220x180?text=I" alt="Product I" class="product-image">
            <div class="product-details">
                <h3 class="product-name">I</h3>
                <p class="product-price">$90</p>
                <button class="add-to-cart">Add to cart</button>
            </div>
        </div>

        <!-- Product J -->
        <div class="product-card">
            <img src="https://via.placeholder.com/220x180?text=J" alt="Product J" class="product-image">
            <div class="product-details">
                <h3 class="product-name">J</h3>
                <p class="product-price">$100</p>
                <button class="add-to-cart">Add to cart</button>
            </div>
        </div>
    </div>
</body>
</html>

Key Features:

1. Responsive Layout: Uses CSS Grid with auto-fit and minmax to adjust to different screen sizes (mobile-friendly).
2. Visual Appeal: Includes hover effects (card lift and button color change) for better user interaction.
3. Clean Design: White background cards with subtle shadows for a modern look.
4. Placeholder Images: Uses via.placeholder.com to generate product-specific placeholder images.
5. Consistent Styling: Uniform padding, font sizes, and button styles across all products.

You can replace the placeholder image URLs with actual product images and adjust the styling (colors, fonts, spacing) to match your brand identity. The code is easy to extend—just copy the product card block and modify the details for new products.

作者声明:本文包含人工智能生成内容。