在 css 中使用网格定位 div

Question

为了图表的目的，我 parent_div 比屏幕小。但是，它覆盖了所有屏幕。这是我的 HTML 和 CSS

的代码片段

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>

在 css 中使用网格定位 div

Positioning divs using grid in css

html

css

css-grid