Implementieren Sie ein Rasterlayout mit drei Spalten, wobei sich ein Element über die gesamte Höhe der ersten Spalte erstreckt

Question

Ich möchte den Inhalt einer Spalte in CSS versetzen. Ich denke, es ist so einfach, wie folgt vorzugehen. Dadurch wird der obere Teil zwar versetzt, aber die zweite Spalte passt sich der Höhe der ersten Spalte an (einschließlich Ränder). Wie kann ich sonst die erste Spalte versetzen?

https://jsbin.com/delobaluga/edit?html,css,output

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

.grid .item:first-child {
   margin-top: 105px;
}

<div class='grid'>
    <div class='item'></div>
    <div class='item'></div>
</div>

Answer 1

如果要偏移第一列，同时保持第二列的高度不受影响，可以在第一列上使用内边距而不是边距。 padding影响元素的内容区域，而margin影响周围区域，所以如果你给第一列添加padding，它会增加它的大小并偏移其中的内容，但不会影响第二列的高度。

这是经过此改进的代码：

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

.grid .item:first-child {
   padding-top: 105px;
}