Exemple de code de la propriété CSS column-gap.

<style>
.exemple-grid-container{ 
  display : grid; 
  grid-template-columns : auto auto; 
  justify-content : flex-start; 
  align-content :  flex-start; 
}

.exemple-flex-container{ 
  display : flex; 
  flex-wrap : wrap; 
  justify-content : flex-start; 
  align-content :  flex-start; 
}
.exemple-flex-container .exemple-grid-item{
  width : 30%; 
}

.exemple-column-container{ 
  columns : 2 auto; 
}
.exemple-column-container .exemple-grid-item{ 
  width : auto; 
}

.column-gap-normal{ 
 column-gap : normal; 
}
.column-gap-px{  
 column-gap : 50px; 
}
.column-gap-zero{  
 column-gap : 0; 
}
.column-gap-pourcent{  
 column-gap : 30%; 
}
 
.exemple-grid-item{border:1px dotted #666; width:100px; }
.exemple { border:1px solid #2a712a; margin-bottom:10px; padding:5px; }</style>
<strong>column-gap par défaut (Grid)</strong> 
<div class="exemple exemple-grid-container">
  <div class="exemple-grid-item">Cel. Grid 1</div>
  <div class="exemple-grid-item">Cel. Grid 2</div>
  <div class="exemple-grid-item">Cel. Grid 3</div>
  <div class="exemple-grid-item">Cel. Grid 4</div>  
</div>

<strong>column-gap par défaut (Flexbox)</strong> 
<div class="exemple exemple-flex-container">
  <div class="exemple-grid-item">Cel. Grid 1</div>
  <div class="exemple-grid-item">Cel. Grid 2</div>
  <div class="exemple-grid-item">Cel. Grid 3</div>
  <div class="exemple-grid-item">Cel. Grid 4</div>  
</div>

<strong>column-gap par défaut (MultiColumns)</strong> 
<div class="exemple exemple-column-container">
  <div class="exemple-grid-item">Cum haec taliaque sollicitas eius aures everberarent expositas semper eius modi rumoribus et patentes, varia animo tum miscente consilia, tandem id ut optimum factu elegit: et Vrsicinum primum ad se venire summo cum honore mandavit ea specie ut pro rerum tunc urgentium captu disponeretur concordi consilio, quibus virium incrementis Parthicarum gentium a arma minantium impetus frangerentur.</div> 
</div>

<strong>column-gap : normal; (Grid)</strong> 
<div class="exemple exemple-grid-container column-gap-auto">
  <div class="exemple-grid-item">Cel. Grid 1</div>
  <div class="exemple-grid-item">Cel. Grid 2</div>
  <div class="exemple-grid-item">Cel. Grid 3</div>
  <div class="exemple-grid-item">Cel. Grid 4</div>  
</div>

<strong>column-gap : normal; (Flexbox)</strong> 
<div class="exemple exemple-flex-container column-gap-normal">
  <div class="exemple-grid-item">Cel. Grid 1</div>
  <div class="exemple-grid-item">Cel. Grid 2</div>
  <div class="exemple-grid-item">Cel. Grid 3</div>
  <div class="exemple-grid-item">Cel. Grid 4</div>  
</div>

<strong>column-gap : normal; (MultiColumns)</strong> 
<div class="exemple exemple-column-container column-gap-normal">
  <div class="exemple-grid-item">Cum haec taliaque sollicitas eius aures everberarent expositas semper eius modi rumoribus et patentes, varia animo tum miscente consilia, tandem id ut optimum factu elegit: et Vrsicinum primum ad se venire summo cum honore mandavit ea specie ut pro rerum tunc urgentium captu disponeretur concordi consilio, quibus virium incrementis Parthicarum gentium a arma minantium impetus frangerentur.</div>  
</div>

<strong>column-gap : 50px; (Grid)</strong> 
<div class="exemple exemple-grid-container column-gap-px">
  <div class="exemple-grid-item">Cel. Grid 1</div>
  <div class="exemple-grid-item">Cel. Grid 2</div>
  <div class="exemple-grid-item">Cel. Grid 3</div>
  <div class="exemple-grid-item">Cel. Grid 4</div>  
</div>

<strong>column-gap : 50px; (Flexbox)</strong> 
<div class="exemple exemple-flex-container column-gap-px">
  <div class="exemple-grid-item">Cel. Grid 1</div>
  <div class="exemple-grid-item">Cel. Grid 2</div>
  <div class="exemple-grid-item">Cel. Grid 3</div>
  <div class="exemple-grid-item">Cel. Grid 4</div>  
</div>

<strong>column-gap : 50px; (MultiColumns)</strong> 
<div class="exemple exemple-column-container column-gap-px">
  <div class="exemple-grid-item">Cum haec taliaque sollicitas eius aures everberarent expositas semper eius modi rumoribus et patentes, varia animo tum miscente consilia, tandem id ut optimum factu elegit: et Vrsicinum primum ad se venire summo cum honore mandavit ea specie ut pro rerum tunc urgentium captu disponeretur concordi consilio, quibus virium incrementis Parthicarum gentium a arma minantium impetus frangerentur.</div>  
</div>

<strong>column-gap : 30%; (Grid)</strong> 
<div class="exemple exemple-grid-container column-gap-pourcent">
  <div class="exemple-grid-item">Cel. Grid 1</div>
  <div class="exemple-grid-item">Cel. Grid 2</div>
  <div class="exemple-grid-item">Cel. Grid 3</div>
  <div class="exemple-grid-item">Cel. Grid 4</div>  
</div>

<strong>column-gap : 30%; (Flexbox)</strong> 
<div class="exemple exemple-flex-container column-gap-pourcent">
  <div class="exemple-grid-item">Cel. Grid 1</div>
  <div class="exemple-grid-item">Cel. Grid 2</div>
  <div class="exemple-grid-item">Cel. Grid 3</div>
  <div class="exemple-grid-item">Cel. Grid 4</div>  
</div>

<strong>column-gap : 30%; (MultiColumns)</strong> 
<div class="exemple exemple-column-container column-gap-pourcent">
  <div class="exemple-grid-item">Cum haec taliaque sollicitas eius aures everberarent expositas semper eius modi rumoribus et patentes, varia animo tum miscente consilia, tandem id ut optimum factu elegit: et Vrsicinum primum ad se venire summo cum honore mandavit ea specie ut pro rerum tunc urgentium captu disponeretur concordi consilio, quibus virium incrementis Parthicarum gentium a arma minantium impetus frangerentur.</div>  
</div>

<strong>column-gap : 0; (MultiColumns)</strong> 
<div class="exemple exemple-column-container column-gap-zero">
  <div class="exemple-grid-item">Cum haec taliaque sollicitas eius aures everberarent expositas semper eius modi rumoribus et patentes, varia animo tum miscente consilia, tandem id ut optimum factu elegit: et Vrsicinum primum ad se venire summo cum honore mandavit ea specie ut pro rerum tunc urgentium captu disponeretur concordi consilio, quibus virium incrementis Parthicarum gentium a arma minantium impetus frangerentur.</div>  
</div>