我当前的问题是，即使使用place-items：center语法，使用fr单位时也无法居中网格。当我将fr单位更改为px并使用place-content：center;时，一切都集中在页面上的适当位置，但是使用像素会导致网格不灵活。我希望此网格灵活。
其他问题：css网格位于左侧（开始）（左对齐）侧，并且网格容器向右延伸得很远，这不是我想要的。我想将网格置于页面中心，并使用fr单元使网格中的内容居中。
这里是我在codesandbox上的代码的链接，以查看我的代码：
应为grid-template-columns: repeat(4, 1fr);
不是grid-template-columns: repeat(4, 1fr 1fr);
.itm1 {
background-color: crimson;
grid-area: itm1;
}
.itm2 {
background-color: darkcyan;
grid-area: itm2;
}
.itm3 {
background-color: darkolivegreen;
grid-area: itm3;
}
.itm4 {
background-color: darkslateblue;
grid-area: itm4;
}
.itm5 {
background-color: darkslategrey;
grid-area: itm5;
}
.itm6 {
background-color: indianred;
grid-area: itm6;
}
.itm7 {
background-color: olivedrab;
grid-area: itm7;
}
.itm8 {
background-color: mediumvioletred;
grid-area: itm8;
}
.itm9 {
background-color: mediumaquamarine;
grid-area: itm9;
}
.itm10 {
background-color: lightslategrey;
grid-area: itm10;
}
.itm11 {
background-color: lightgreen;
grid-area: itm11;
}
.itm12 {
background-color: lightblue;
grid-area: itm12;
}
.frunits {
padding: 30px;
height: 350px;
display: grid;
grid-row-gap: 20px;
grid-column-gap: 20px;
background-color: indigo;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(4, 1fr);
grid-template-areas:
"itm1 itm2 itm3 itm4"
"itm5 itm6 itm7 itm8"
"itm9 itm10 itm11 itm12";
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<title>Static Template</title>
</head>
<body>
<div class="frunits">
<div class="itm1"></div>
<div class="itm2"></div>
<div class="itm3"></div>
<div class="itm4"></div>
<div class="itm5"></div>
<div class="itm6"></div>
<div class="itm7"></div>
<div class="itm8"></div>
<div class="itm9"></div>
<div class="itm10"></div>
<div class="itm11"></div>
<div class="itm12"></div>
<div class="itm13"></div>
</div>
</body>
</html>