Multi-colonnes en CSS3
Le CSS3 présente un nouvel attribut permettant une mise en page en multi-colonnes. On peut spécifier le nombre de colonnes divisant le texte.
Voici les différents propriétés permettant le multi-colonnes:
- columns:
- column-count: nombre de colonnes
- column-gap: espace entre les colonnes
- column-width: largeur des colonnes
- column-rule: "règle" de la colonne équivalent à la bordure entre les colonnes (couleur, style, taille)
- column-rule-style column-rule-color column-rule-width
- column-span: permet d'annuler provisoirement le multi-colonnes sur un tag. Nous le verrons plus tard dans un exemple. (non pris en compte pour l'instant par les navigateurs)
- column-fill: (non pris en compte pour l'instant par les navigateurs)
Il faut bien entendu rajouter le préfixe navigateur, pour en permettre l'utilisation:
Exemple
- -moz-column-count
- ou -webkit-column-count
Exemple
Exemple 1: mise en place de colonnes à largeur fixe
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla ultricies nisi, at pulvinar elit accumsan et. Suspendisse sem est, consectetur eu pulvinar ac, sollicitudin quis mi. In massa dui, lacinia id vestibulum pellentesque, vulputate ut elit. Aenean egestas ultricies augue, vel dignissim lorem rhoncus eget. Vestibulum dui orci, laoreet ac feugiat id, facilisis eget dolor. Aliquam eu elit eu sapien suscipit sodales at at quam. Nunc leo libero, eleifend nec dictum eu, luctus in odio. Ut pretium dolor sed sapien vulputate euismod commodo nisi posuere. Vivamus ac mi vitae dui vehicula rhoncus. Praesent iaculis lacinia consectetur.
Duis ut nibh ac orci fermentum congue. Phasellus at lacinia velit. Cras hendrerit, arcu ac interdum adipiscing, sem neque interdum quam, at ultricies diam felis a lacus. Phasellus sit amet tempor dui. Donec at urna diam. Vestibulum lobortis purus vitae metus consequat nec tincidunt metus venenatis. Nunc sit amet elit mi. Etiam mattis mauris magna, et tincidunt ante. Ut posuere, elit ac bibendum suscipit, elit orci adipiscing nisl, ac dictum mauris est ac libero. Aenean vel nibh massa. In nulla ipsum, egestas at consequat in, facilisis eget lacus. Aenean at est nulla. In fermentum vestibulum purus id imperdiet. Ut tristique, enim at ultricies iaculis, velit massa sollicitudin nibh, sit amet varius elit nisi id ante. Curabitur metus sem, sodales vel commodo et, semper ac lorem. Donec tincidunt venenatis velit, eget mattis magna porta vel.
Code
.multicolumns-1{
-moz-column-width: 130px;
-webkit-column-width: 130px;
-o-column-width: 130px;
column-width: 130px;
}
Exemple 2: mise en place de 3 colonnes avec bordure entre les colonnes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla ultricies nisi, at pulvinar elit accumsan et. Suspendisse sem est, consectetur eu pulvinar ac, sollicitudin quis mi. In massa dui, lacinia id vestibulum pellentesque, vulputate ut elit. Aenean egestas ultricies augue, vel dignissim lorem rhoncus eget. Vestibulum dui orci, laoreet ac feugiat id, facilisis eget dolor. Aliquam eu elit eu sapien suscipit sodales at at quam. Nunc leo libero, eleifend nec dictum eu, luctus in odio. Ut pretium dolor sed sapien vulputate euismod commodo nisi posuere. Vivamus ac mi vitae dui vehicula rhoncus. Praesent iaculis lacinia consectetur.
Duis ut nibh ac orci fermentum congue. Phasellus at lacinia velit. Cras hendrerit, arcu ac interdum adipiscing, sem neque interdum quam, at ultricies diam felis a lacus. Phasellus sit amet tempor dui. Donec at urna diam. Vestibulum lobortis purus vitae metus consequat nec tincidunt metus venenatis. Nunc sit amet elit mi. Etiam mattis mauris magna, et tincidunt ante. Ut posuere, elit ac bibendum suscipit, elit orci adipiscing nisl, ac dictum mauris est ac libero. Aenean vel nibh massa. In nulla ipsum, egestas at consequat in, facilisis eget lacus. Aenean at est nulla. In fermentum vestibulum purus id imperdiet. Ut tristique, enim at ultricies iaculis, velit massa sollicitudin nibh, sit amet varius elit nisi id ante. Curabitur metus sem, sodales vel commodo et, semper ac lorem. Donec tincidunt venenatis velit, eget mattis magna porta vel.
Code
.multicolumns-2{
-moz-column-count: 3;
-webkit-column-count: 3;
-o-column-count: 3;
column-count: 3;
-moz-column-rule: 1px solid #ddccbb;
-webkit-column-rule: 1px solid #ddccbb;
-o-column-rule: 1px solid #ddccbb;
column-rule: 1px solid #ddccbb;
}
Exemple 3: mise en place de 3 colonnes avec bordure entre les colonnes et un gap
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla ultricies nisi, at pulvinar elit accumsan et. Suspendisse sem est, consectetur eu pulvinar ac, sollicitudin quis mi. In massa dui, lacinia id vestibulum pellentesque, vulputate ut elit. Aenean egestas ultricies augue, vel dignissim lorem rhoncus eget. Vestibulum dui orci, laoreet ac feugiat id, facilisis eget dolor. Aliquam eu elit eu sapien suscipit sodales at at quam. Nunc leo libero, eleifend nec dictum eu, luctus in odio. Ut pretium dolor sed sapien vulputate euismod commodo nisi posuere. Vivamus ac mi vitae dui vehicula rhoncus. Praesent iaculis lacinia consectetur.
Duis ut nibh ac orci fermentum congue. Phasellus at lacinia velit. Cras hendrerit, arcu ac interdum adipiscing, sem neque interdum quam, at ultricies diam felis a lacus. Phasellus sit amet tempor dui. Donec at urna diam. Vestibulum lobortis purus vitae metus consequat nec tincidunt metus venenatis. Nunc sit amet elit mi. Etiam mattis mauris magna, et tincidunt ante. Ut posuere, elit ac bibendum suscipit, elit orci adipiscing nisl, ac dictum mauris est ac libero. Aenean vel nibh massa. In nulla ipsum, egestas at consequat in, facilisis eget lacus. Aenean at est nulla. In fermentum vestibulum purus id imperdiet. Ut tristique, enim at ultricies iaculis, velit massa sollicitudin nibh, sit amet varius elit nisi id ante. Curabitur metus sem, sodales vel commodo et, semper ac lorem. Donec tincidunt venenatis velit, eget mattis magna porta vel.
Code
.multicolumns-3{
-moz-column-count: 3;
-webkit-column-count: 3;
-o-column-count: 3;
column-count: 3;
-moz-column-gap: 40px;
-webkit-column-gap: 40px;
-o-column-gap: 40px;
column-gap: 40px;
-moz-column-rule: 1px solid #045FB4;
-webkit-column-rule: 1px solid #045FB4;
-o-column-rule: 1px solid #045FB4;
column-rule: 1px solid #045FB4;
}
Exemple 4: mise en place de 4 colonnes avec bordure entre les colonnes et texte justifié
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla ultricies nisi, at pulvinar elit accumsan et. Suspendisse sem est, consectetur eu pulvinar ac, sollicitudin quis mi. In massa dui, lacinia id vestibulum pellentesque, vulputate ut elit. Aenean egestas ultricies augue, vel dignissim lorem rhoncus eget. Vestibulum dui orci, laoreet ac feugiat id, facilisis eget dolor. Aliquam eu elit eu sapien suscipit sodales at at quam. Nunc leo libero, eleifend nec dictum eu, luctus in odio. Ut pretium dolor sed sapien vulputate euismod commodo nisi posuere. Vivamus ac mi vitae dui vehicula rhoncus. Praesent iaculis lacinia consectetur.
Duis ut nibh ac orci fermentum congue. Phasellus at lacinia velit. Cras hendrerit, arcu ac interdum adipiscing, sem neque interdum quam, at ultricies diam felis a lacus. Phasellus sit amet tempor dui. Donec at urna diam. Vestibulum lobortis purus vitae metus consequat nec tincidunt metus venenatis. Nunc sit amet elit mi. Etiam mattis mauris magna, et tincidunt ante. Ut posuere, elit ac bibendum suscipit, elit orci adipiscing nisl, ac dictum mauris est ac libero. Aenean vel nibh massa. In nulla ipsum, egestas at consequat in, facilisis eget lacus. Aenean at est nulla. In fermentum vestibulum purus id imperdiet. Ut tristique, enim at ultricies iaculis, velit massa sollicitudin nibh, sit amet varius elit nisi id ante. Curabitur metus sem, sodales vel commodo et, semper ac lorem. Donec tincidunt venenatis velit, eget mattis magna porta vel.
Code
.multicolumns-4{
text-align: justify;
-moz-column-count: 4;
-webkit-column-count: 4;
-o-column-count: 4;
column-count: 4;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
-o-column-gap: 20px;
column-gap: 20px;
-moz-column-rule: 1px dotted #045FB4;
-webkit-column-rule: 1px dotted #045FB4;
-o-column-rule: 1px dotted #045FB4;
column-rule: 1px dotted #045FB4;
}
Exemple 4: mise en place de colonne avec un titre (h2) sans le multi-colonnes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla ultricies nisi, at pulvinar elit accumsan et. Suspendisse sem est, consectetur eu pulvinar ac, sollicitudin quis mi. In massa dui, lacinia id vestibulum pellentesque, vulputate ut elit. Aenean egestas ultricies augue, vel dignissim lorem rhoncus eget. Vestibulum dui orci, laoreet ac feugiat id, facilisis eget dolor. Aliquam eu elit eu sapien suscipit sodales at at quam. Nunc leo libero, eleifend nec dictum eu, luctus in odio. Ut pretium dolor sed sapien vulputate euismod commodo nisi posuere. Vivamus ac mi vitae dui vehicula rhoncus. Praesent iaculis lacinia consectetur.
Lorem ipsum dolor sit amet
Duis ut nibh ac orci fermentum congue. Phasellus at lacinia velit. Cras hendrerit, arcu ac interdum adipiscing, sem neque interdum quam, at ultricies diam felis a lacus. Phasellus sit amet tempor dui. Donec at urna diam. Vestibulum lobortis purus vitae metus consequat nec tincidunt metus venenatis. Nunc sit amet elit mi. Etiam mattis mauris magna, et tincidunt ante. Ut posuere, elit ac bibendum suscipit, elit orci adipiscing nisl, ac dictum mauris est ac libero. Aenean vel nibh massa. In nulla ipsum, egestas at consequat in, facilisis eget lacus. Aenean at est nulla. In fermentum vestibulum purus id imperdiet. Ut tristique, enim at ultricies iaculis, velit massa sollicitudin nibh, sit amet varius elit nisi id ante. Curabitur metus sem, sodales vel commodo et, semper ac lorem. Donec tincidunt venenatis velit, eget mattis magna porta vel.Code
.multicolumns-5{
text-align: justify;
-moz-column-count: 4;
-webkit-column-count: 4;
-o-column-count: 4;
column-count: 4;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
-o-column-gap: 20px;
column-gap: 20px;
-moz-column-rule: 1px dotted #045FB4;
-webkit-column-rule: 1px dotted #045FB4;
-o-column-rule: 1px dotted #045FB4;
column-rule: 1px dotted #045FB4;
-webkit-column-fill: balance;
-moz-column-fill: balance;
-o-column-fill: balance;
column-fill: balance;
}
.multicolumns-5 h2{
-webkit-column-span: all;
-moz-column-span: all;
-o-column-span: all;
column-span: all;
}
Téléchargement
le fichier css de tous les exemples
le code HTML