Question

我目前处于一种情况，我有一个嵌套的div item2half，我想将其放置在我的某处 grid-container-问题在于它在html中的位置-我无法在grid-container中找到它如果我将item-2放置到网格中，则会将item2half放置在item-2网格中的grid-container位置内。

html

<div class="grid-container">
  <div class="item-1">1</div>
  <div class="item-2">2
    <div class="item2half">
      2.5
    </div>
  </div>
  <div class="item-3">3</div>
  <div class="item-4">4</div>
</div>

css

.grid-container {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 20px;
}

.item-1 {
    background-color: rgba(200,520,266,.75);
    border-color: #b4b4b4;
    grid-column: 2;
    grid-row: 2;
}

.item-2 {
    background-color: rgba(145,223,0,.75);
    border-color: transparent;
    grid-column: 1;
    grid-row: 1;
}

.item-3 {
    background-color: rgba(145,520,0,.75);
    grid-column: 3;
    grid-row: 3;
}

.item-4 {
    background-color: rgba(0,0,0,.25);
    border-color: transparent;
    grid-column: 3;
    grid-row: 1;
}

.item2half {
    background-color: rgb(20,100,255);
    border-color: transparent;
    grid-column: 2;
    grid-row: 1;
}

密码笔https://codepen.io/anon/pen/ewqmXw

我希望将item2half放在网格容器的第2列第1行

Answer 1

喜欢吗？我刚刚编辑了html，而您的item2half在第2列第1行的item1上方。如果这不是您要的内容，请更具体。 https://codepen.io/anon/pen/XLvbvR

<div class="grid-container">
 <div class="item-1">1</div>
<div class="item-2">2
</div>
<div class="item2half">2.5</div>
<div class="item-3">3</div>
<div class="item-4">4</div>

Answer 2

我已经编辑了您的笔并将“项目2”设置为网格，请检查该笔是否有帮助。 CedePen

<div class="grid-container">
  <div class="item-1">1</div>
  <div class="item-2">
    <div class="item2full">
      2
    </div>
    <div class="item2half">
      2.5
    </div>
  </div>
  <div class="item-3">3</div>
  <div class="item-4">4</div>
</div>

Css：

.grid-container {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 20px;
}

.item-1 {
    background-color: rgba(200,520,266,.75);
    border-color: #b4b4b4;
    grid-column: 2;
    grid-row: 2;
}

.item-2 {
    background-color: rgba(145,223,0,.75);
    border-color: transparent;
    grid-column: 1/3;
    grid-row: 1;
    display: grid;
    grid-gap: 20px;
    background:transparent;
}

.item-3 {
    background-color: rgba(145,520,0,.75);
    grid-column: 3;
    grid-row: 3;
}

.item-4 {
    background-color: rgba(0,0,0,.25);
    border-color: transparent;
    grid-column: 3;
    grid-row: 1;
}

.item2half {
    background-color: rgb(20,100,255);
    border-color: transparent;
    grid-column: 2;
    grid-row: 1;
}
.item2full {
    background-color: red;
    border-color: transparent;
    grid-column: 1;
    grid-row: 1;
}

放置物品给其祖父母

2 个答案: