我正在尝试将PHP查询的结果集流到网格中。我将内容居中，但我希望内容从左到右流动，并且我一直停留在居中、开始或结束的位置。
我只有一个网格项，我正在循环，然后将结果集插入到网格中。
到目前为止，最终结果是所有结果都排在页面的中心。我希望它们从左向右流动。
我想修改.grid项，并在不使用float元素的情况下从左向右浮动它，因为float对display:grid没有影响。
<!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{
display: grid;
width: 100%;
height: auto;
margin: 0 auto;
background: lightblue;
}
.grid-container{
display: grid;
grid-template-columns: auto auto auto auto;
grid-template-rows: auto auto auto auto;
column-gap: 5px;
row-gap: 5px;
justify-content: center;
align-content: flex-start;
}
.grid-item{
display: inline-grid;
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;
}
/*.grid-item:hover{
display: grid;
font-family: helvetica, sans-serif;
width: 200px;
height: 300px;
text-align: right;
font-weight: bold;
background: tomato;
cursor: pointer;
color: gold;
}
b.b{
color: white;
}
</style>
<header>
</header>
</head>
<body>
<?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='wrapper'>
<div class='grid-container'>
<div class='grid-item'>(%s)<b class='b'>%s:</b>
$%d </div>
</div>
</div>", $sku, $name, $price);
?>
</body>
</html>
如果你想让你的物品从左到右流动，你只需要为所有物品有一个包装器/容器元素：
<!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 {
display: grid;
width: 100%;
height: auto;
margin: 0 auto;
background: lightblue;
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-template-rows: auto auto auto auto;
column-gap: 5px;
row-gap: 5px;
justify-content: center;
align-content: flex-start;
}
.grid-item {
display: inline-grid;
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;
}
/*.grid-item:hover{
display: grid;
font-family: helvetica, sans-serif;
width: 200px;
height: 300px;
text-align: right;
font-weight: bold;
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>
它将创建一个网格，每行有4个项目