Grid Layout body{display: flex;justify-content: center;align-items: center;height:100vh;margin:0;background-color:#f4f4f4; }.container{display: grid;grid-template-columns:repeat(3,100px);/* 3列，每列宽100px */grid-template-rows:repeat(3,100px);/* 3行，每行高100px */gap:10px;/* 每个格子之间的间距 */}.containerdiv{background:#6c8ebf;display: flex;align-items: center;justify-content: center;color: white;font-size:16px; }.container.center{grid-column:2/4;/* 从第2列到第4列 */grid-row:1/3;/* 从第1行到第3行 */}
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Layout</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.container {
display: grid;
grid-template-columns: repeat(3, 100px); /* 3列，每列宽100px */
grid-template-rows: repeat(3, 100px); /* 3行，每行高100px */
gap: 10px; /* 每个格子之间的间距 */
}
.container div {
background: #6c8ebf;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 16px;
}
.container .center {
grid-column: 2 / 4; /* 从第2列到第4列 */
grid-row: 1 / 3; /* 从第1行到第3行 */
}
</style>
</head>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div class="center">5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
grid-template-columns: repeat(3, 100px); /* 3列，每列宽100px */
grid-template-rows: repeat(3, 100px); /* 3行，每行高100px */
grid-column: 2 / 4; 表示该 div 从第二列开始，跨越到第四列（不包括第四列）。
grid-row: 1 / 3; 表示该 div 从第一行开始，跨越到第三行（不包括第三行）。
这样设置后，center类的div将会占据第一行的第二、三列和第二行的第二、三列位置。希望这可以满足您的布局要求！
