Implement a grid layout with 3 columns with one item spanning the entire height of the first column

Question

I want to offset 1 column content in CSS. I think it's as simple as doing the following. Now, this does offset the top, but it makes the second column match the height of the first column (including margins). How else can I offset the first column?

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

If you want to offset the first column while keeping the height of the second column unaffected, you can use padding instead of margins on the first column. Padding affects the content area of ​​an element, while margin affects the surrounding area, so if you add padding to the first column, it will increase its size and offset the content within it, but will not affect the height of the second column.

This is the code improved with this:

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

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