实现一个网格布局，包含3列，其中一个项目跨越整个第一列的高度

Question

我想在 CSS 中偏移 1 列内容。我认为就像执行以下操作一样简单。现在，这确实偏移了顶部，但它使第二列与第一列的高度（包括边距）匹配。我还能如何偏移第一列？

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

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