我的grid-container类不是垂直扩展的，而是水平扩展的。 大小以百分比设置。 我怎样才能使我的网格单元在两个方向上伸展？
null
.container {
width: 20rem;
height: 20rem;
margin: 0 1rem;
border: 1px solid black;
}
.grid-container{
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
border: 1px solid red;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
<div class="grid-container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>null
将网格单元格的宽度和高度设置为100%。 这将使网格单元在垂直和水平方向上伸展
.container {
width: 20rem;
height: 20rem;
margin: 0 1rem;
border: 1px solid black;
}
.grid-container{
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
border: 1px solid red;
}
您可以使用padding而不是使用heighth，因为height定义了应该是什么高度，但是padding会导致heighth和width根据内部项扩展，因此，padding会影响您的height和width，您会发现您的网格容器会因为padding而变大，解决方案是减少padding和width的值
null
.container {
width: 20rem;
padding: 20rem;
margin: 0 1rem;
border: 1px solid black;
}
.grid-container{
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
border: 1px solid red;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
<div class="grid-container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>