/ Code Css column-gap | Résultat du code Css column-gap | Copie d'écran / J'ai vu une erreur dans cette page

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

<style>
.exemple-grid-container{ 
   : grid; 
   : auto auto; 
   : flex-start; 
   :  flex-start; 
}

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

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

.column-gap-normal{ 
  : normal; 
}
.column-gap-px{  
  : 50px; 
}
.column-gap-zero{  
  : 0; 
}
.column-gap-pourcent{  
  : 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>

Interprétation du code de la propriété column-gap CSS par votre navigateur.

column-gap par défaut (Grid)
Cel. Grid 1
Cel. Grid 2
Cel. Grid 3
Cel. Grid 4
column-gap par défaut (Flexbox)
Cel. Grid 1
Cel. Grid 2
Cel. Grid 3
Cel. Grid 4
column-gap par défaut (MultiColumns)
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.
column-gap : normal; (Grid)
Cel. Grid 1
Cel. Grid 2
Cel. Grid 3
Cel. Grid 4
column-gap : normal; (Flexbox)
Cel. Grid 1
Cel. Grid 2
Cel. Grid 3
Cel. Grid 4
column-gap : normal; (MultiColumns)
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.
column-gap : 50px; (Grid)
Cel. Grid 1
Cel. Grid 2
Cel. Grid 3
Cel. Grid 4
column-gap : 50px; (Flexbox)
Cel. Grid 1
Cel. Grid 2
Cel. Grid 3
Cel. Grid 4
column-gap : 50px; (MultiColumns)
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.
column-gap : 30%; (Grid)
Cel. Grid 1
Cel. Grid 2
Cel. Grid 3
Cel. Grid 4
column-gap : 30%; (Flexbox)
Cel. Grid 1
Cel. Grid 2
Cel. Grid 3
Cel. Grid 4
column-gap : 30%; (MultiColumns)
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.
column-gap : 0; (MultiColumns)
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.

Interprétation normale du code de la propriété CSS column-gap (copie d'écran).

copie d'écran de l'affichage de la propriété CSS column-gap