PHP循环生成重复卡片问题求助：单条数据渲染三张相同卡片

你的问题根源很清晰：你把整个网格容器和3张重复的卡片都塞进了数据库查询的while循环里，导致每读取一条用户数据，就会生成一个独立的三列网格，里面全是当前这条数据的重复卡片，自然就出现了Ben重复三次、Janna重复三次的情况。

修复步骤 #

1. 将.grid-container的定义移到while循环外部，确保整个页面只有一个网格容器。
2. 在while循环内部只生成一个.card，让每条数据库记录对应唯一一张卡片，网格布局会自动按你设置的3列规则排列这些卡片。
3. 修正原代码里多余的闭合</div>标签（原代码末尾多了一个无关的</div>，会破坏HTML结构）。

修改后的完整代码 #

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Covid-Deaths</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="https://kit.fontawesome.com/1f285a5a86.js" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>You're terrible at this</h1>
<p>Get each picture to be unique</p>
<?php 
//database Connection
include 'dbconfig.php';
// retrieving data from table accounts
$query = "SELECT * FROM test_info";
$result = mysqli_query($conn, $query);
?>
<!-- 网格容器只创建一次，放在循环外 -->
<div class="grid-container">
<?php if ($result->num_rows > 0) { 
    while ($row = $result->fetch_assoc()) { ?>
        <!-- 每条数据对应一张卡片 -->
        <div class ="card">
            <a href="<?php echo $row['obit_url']; ?>"><img src="uploaded-images/<?php echo $row['picture'];?>" width="80%"/></a>
            <h4><?php echo $row['names']; echo ", "; echo $row['age'];?></h4>
            <p><?php echo "State: "; echo $row['state']; ?></p>
        </div>
<?php } 
} ?>
</div>
</body>
</html>

补充说明 #

你写的CSS规则grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))已经很合适了，它会自动根据屏幕宽度调整列数：当空间足够时显示3列，数据会依次填充到网格中，正好实现你想要的每行展示不同用户卡片的效果。

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