Multi-colonnes en CSS3

#conteneur {

  width: 960px;
  -webkit-columns: 3 auto;
  -moz-columns: 3 auto;
  columns: 3 auto;
  -moz-column-gap: 40px;
  -webkit-column-gap: 40px;
  column-gap: 40px;
}

Placer des filets verticaux avec les règles columnrule-color, couleur du filet, column-rule-style, 

style du filet et column-rulewidth, largeur du filet.

#conteneur {
  width: 960px;
  -webkit-columns: 3 auto;
  -moz-columns: 3 auto;
  columns: 3 auto;
  -webkit-column-gap: 40px;
  -moz-column-gap: 40px;
  column-gap: 40px;
  -webkit-column-rule: 1px solid #000;
  -moz-column-rule: 1px solid #000);
  column-rule: 1px solid #000;
}

imposer des sauts de colonnes avec les propriétés break-before, break-inside et break-after. 

Les valeurs sont nombreuses pour :

break-before et break-inside : auto, always, avoid, left, right, page, column, avoid-page et

avoid-column. 

#conteneur p {
  margin: 0;
  background-color: #dedede;
  break-before: column;
}

Attention cette propriété n'est reconnue que par les dernières versions d'Internet Explorer et Opera.

Voici l'affichage obtenu dans Opera :

La propriété column-span permet de répartir un élément sur plusieurs colonnes. 

La valeur all permet une répartition sur toutes les colonnes de la mise en page.

Pour cet exemple, ajoutons un titre <h2> dans notre conteneur :

<div id="conteneur">

  <h2>Cum sociis natoque...</h2>

  <P>...</p>

  ...

</div>

Voilà le sélecteur ajouté :

#conteneur h2 {

  column-span: all;

  -webkit-column-span: all;

}

Notez que cette propriété n'est pas reconnue par Firefox.

Voici l'affichage obtenu avec la dernière version d'Opera :

Pour vous aidez à générer le code plus rapidement, vous trouverez à cette URL, 

un générateur de multi-colonnes en ligne, avec les préfixes constructeurs des navigateurs 

sachant qu'Opera n'en a plus besoin