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?從第一行開始，跨越到第三行（不包括第三行）。
這樣設(shè)置后，center類的div將會占據(jù)第一行的第二、三列和第二行的第二、三列位置。希望這可以滿足您的布局要求！
