Implémentez une disposition en grille avec 3 colonnes avec un élément couvrant toute la hauteur de la première colonne

Question

Je souhaite compenser le contenu d'une colonne en CSS. Je pense que c'est aussi simple que de faire ce qui suit. Maintenant, cela décale le haut, mais cela fait que la deuxième colonne correspond à la hauteur de la première colonne (y compris les marges). Sinon, comment puis-je décaler la première colonne ?

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

Si vous souhaitez décaler la première colonne tout en gardant la hauteur de la deuxième colonne inchangée, vous pouvez utiliser un remplissage au lieu des marges sur la première colonne. Le remplissage affecte la zone de contenu d'un élément, tandis que la marge affecte la zone environnante, donc si vous ajoutez un remplissage à la première colonne, cela augmentera sa taille et décalera le contenu qu'elle contient, mais n'affectera pas la hauteur de la deuxième colonne. .

Voici le code amélioré avec ceci :

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

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