网格元素不会垂直拉伸

罗斯兰·普拉斯敦（Ruslan Plastun）

我的网格容器类不垂直延伸，但是水平延伸。大小以百分比设置。如何使网格单元双向拉伸？

    .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>

卡尔森

将网格单元的宽度和高度设置为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;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。