/* html */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ggg</title>
<link rel="stylesheet" href="css/jiugg.css">
</head>
<body style="background-color: #eeeff2">
<div class="grid-container">
<div class="grid-item">
<p><b>pod num:</b>39</p>
<p><b>deployment num:</b>19</p>
<span><b>deployment num:</b>19</span>
<span><b>deployment num:</b>19</span>
<span><b>deployment num:</b>19</span>
</div>
<div class="grid-item">
<p><b>pod num:</b>39</p>
<p><b>deployment num:</b>19</p>
<span><b>deployment num:</b>19</span>
<span><b>deployment num:</b>19</span>
<span><b>deployment num:</b>19</span>
</div>
<div class="grid-item">
<p><b>pod num:</b>39</p>
<p><b>deployment num:</b>19</p>
<span><b>deployment num:</b>19</span>
<span><b>deployment num:</b>19</span>
<span><b>deployment num:</b>19</span>
</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>
/* css */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /*将页面分为三列*/
grid-template-rows: repeat(3, 1fr); /*将页面分为三行*/
gap: 10px; /*定义间隔，也可以使用grid-column-gap和grid-row-gap*/
padding: 10px;
}
/* 为网格项应用一些基本样式 */
.grid-item {
/*border: 1px solid #000000;*/
padding: 50px;
font-size: 10px;
color: #4CAF50;
background-color: #ffffff;
/*text-align: center;*/
/*display: flex;*/
/*justify-content: center;*/
/*align-items: center;*/
}
