Laksanakan reka letak grid dengan 3 lajur dengan satu item menjangkau keseluruhan ketinggian lajur pertama

Question

Saya ingin mengimbangi 1 kandungan lajur dalam CSS. Saya fikir ia semudah melakukan perkara berikut. Sekarang, ini mengimbangi bahagian atas, tetapi ia menjadikan lajur kedua sepadan dengan ketinggian lajur pertama (termasuk margin). Bagaimana lagi saya boleh mengimbangi lajur pertama?

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

Jika anda ingin mengimbangi lajur pertama sambil mengekalkan ketinggian lajur kedua tidak terjejas, anda boleh menggunakan pelapik dan bukannya margin pada lajur pertama. Padding mempengaruhi kawasan kandungan sesuatu elemen, manakala margin mempengaruhi kawasan sekeliling, jadi jika anda menambah padding pada lajur pertama, ia akan meningkatkan saiznya dan mengimbangi kandungan di dalamnya, tetapi tidak akan menjejaskan ketinggian lajur kedua .

Ini ialah kod yang dipertingkatkan dengan ini:

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

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