在css中使用网格定位div [重复]

Question

出于图表的目的，我将 parent_div 设置为小于屏幕。但是，它覆盖了所有屏幕。这是我的 HTML 和 CSS 的代码 sn-ps

HTML:

#parent_div {
  width: 100%;
  height: 100vh;
  display: grid;
}

<div id="parent_div">
  <div class="DIV1"></div>
  <div class="DIV2"></div>
  <div class="DIV3"></div>
</div>

可以通过设置宽度和高度来控制 div 的大小，但这不是主要问题。主要问题是：如何使用网格像上图一样定位 div？

谢谢

Answer 1

您可以通过设置适当的grid-template-columns 和grid-template-areas 来做到这一点：

* { box-sizing: border-box; }
body { margin: 0; }

#parent_div {
  border: 5px dotted red;
  height: 100vh;
  display: grid;
  padding: 100px;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "div1 div2"
    "div1 div3";
}

#parent_div> div {
  border: 3px solid green;
}

.DIV1 {
  grid-area: div1;
}

.DIV2 {
  grid-area: div2;
}

.DIV3 {
  grid-area: div3;
}

<div id="parent_div">
  <div class="DIV1"></div>
  <div class="DIV2"></div>
  <div class="DIV3"></div>
</div>