PHP查询结果在Grid容器中实现从左到右流式排列的问题

核心问题分析 #

你当前代码有两个关键问题导致无法实现从左到右流式排列：

• PHP循环里每次都重新生成.wrapper和.grid-container，每个商品项都是独立的网格容器，无法形成连续布局
• .grid-container设置了justify-content: center，强制网格内容居中

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
        *, *:before, *:after{
            box-sizing: border-box;
        }
        body{
            margin: 0;
        }
        .wrapper{
            width: 100%;
            height: auto;
            margin: 0 auto;
            background: lightblue;
            padding: 10px; /* 避免内容贴边 */
        }
        .grid-container{
            display: grid;
            /* 自适应列数，固定每列最小200px */
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            column-gap: 5px;
            row-gap: 5px;
            /* 设置为start让内容从左到右排列 */
            justify-content: start;
            align-content: flex-start;
        }
        .grid-item{ 
            font-family: helvetica, sans-serif;
            width: 200px;
            height: 300px;
            text-align: right;
            font-weight: bold;
            background: pink;
            padding: 10px;
            border: 1px solid black;
            align-items: flex-start;
            align-content: flex-start;
        }
        /* 恢复hover交互样式（可选） */
        .grid-item:hover{ 
            background: tomato;
            cursor: pointer;
            color: gold;
        }
        b.b{
            color: white;
        }
    </style>
</head>
<body>
    <div class='wrapper'>
        <div class='grid-container'>
            <?php
            DEFINE ("DB_USER", "root");
            DEFINE ("DB_HOST", "localhost");
            DEFINE ("DB_PASSWORD", "myroot");
            DEFINE ("DB_NAME", "corporate");

            $dbc = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
            mysqli_set_charset($dbc, 'utf8');

            $q = "SELECT sku, name, price FROM products";
            $r = $dbc->query($q, MYSQLI_STORE_RESULT);

            while(list($sku, $name, $price) = $r->fetch_row()){
                printf("<div class='grid-item'>(%s)<b class='b'>%s:</b> $%d </div>", $sku, $name, $price);
            }
            ?>
        </div>
    </div>
</body>
</html>

关键修改点 #

• 调整HTML结构：将.wrapper和.grid-container移出PHP循环，仅在循环内生成.grid-item，确保所有商品项处于同一个网格容器中
• 优化网格列配置：替换固定列数的grid-template-columns为repeat(auto-fill, minmax(200px, 1fr))，实现自适应列数的同时保证每列宽度
• 修改对齐规则：将.grid-container的justify-content: center改为justify-content: start，让内容从左侧开始流式排列
• 移除冗余样式：删除.grid-item的display: inline-grid，网格容器的子项无需额外设置该属性

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