PHP实现products表按3行多列格式动态展示商品数据的方法

实现方案 #

下面提供可直接运行的完整代码，用CSS Grid实现自动每行3个商品的布局，无需编写复杂的PHP计数判断逻辑，对新手友好，所有配置都和你给出的信息对齐：

<?php
// 数据库连接配置
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "webdevproject";

// 创建数据库连接
$conn = mysqli_connect($servername, $username, $password, $dbname);
// 校验连接状态
if (!$conn) {
  die("连接失败: " . mysqli_connect_error());
}

// 查询products表数据，字段名和你表实际字段不匹配可以自行修改
$sql = "SELECT product_image, product_name, description, price FROM products";
$result = mysqli_query($conn, $sql);
?>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
    <style>
        /* 商品容器，自动适配每行3个，超出自动换行 */
        .product-wrapper {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px; /* 卡片之间的间距 */
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        /* 单个商品卡片样式 */
        .product-card {
            border: 1px solid #eee;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        /* 商品图片统一尺寸，避免变形 */
        .product-img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 4px;
            margin-bottom: 10px;
        }
        .product-name {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 8px;
        }
        .product-desc {
            font-size: 14px;
            color: #666;
            margin-bottom: 10px;
            line-height: 1.4;
        }
        .product-price {
            font-size: 20px;
            color: #e74c3c;
            font-weight: bold;
        }
        /* 响应式适配，不需要可以直接删除 */
        @media (max-width: 768px) {
            .product-wrapper {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        @media (max-width: 480px) {
            .product-wrapper {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="product-wrapper">
        <?php
        // 循环渲染商品卡片
        if (mysqli_num_rows($result) > 0) {
            while($row = mysqli_fetch_assoc($result)) {
        ?>
            <div class="product-card">
                <img src="<?php echo $row['product_image']; ?>" alt="<?php echo $row['product_name']; ?>" class="product-img">
                <div class="product-name"><?php echo $row['product_name']; ?></div>
                <div class="product-desc"><?php echo $row['description']; ?></div>
                <div class="product-price">¥<?php echo $row['price']; ?></div>
            </div>
        <?php
            }
        } else {
            echo "<p>暂无商品数据</p>";
        }
        // 关闭数据库连接
        mysqli_close($conn);
        ?>
    </div>
</body>
</html>

注意事项 #

• 请先确认products表的字段名和代码中查询的字段一致，若你的图片存储字段叫img、名称字段叫name，直接修改SQL语句和对应输出位置的字段名即可
• 如果商品图片存储的是相对路径，要保证路径和项目文件结构对应，比如图片存放在uploads/目录下，可将img的src修改为<?php echo 'uploads/'.$row['product_image']; ?>
• 卡片的颜色、大小、间距都可以直接修改CSS部分调整，不会影响逻辑功能

内容的提问来源于stack exchange，提问作者I_isekeid