實作一個網格佈局，包含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;
}