Skip to content

Instantly share code, notes, and snippets.

@384400

384400/ -column.md

Last active September 24, 2016 12:42
Show Gist options
  • Save 384400/2fbe12b5090c336b6ffb2be0f285d7e0 to your computer and use it in GitHub Desktop.
Save 384400/2fbe12b5090c336b6ffb2be0f285d7e0 to your computer and use it in GitHub Desktop.
Download ZIP
[Html] [Css] Comment afficher une gouttière avec le module Multi-column Layout ?
Raw
-column.md

Comment utiliser le module Multi-column Layout ?

[CSS Multi-column Layout Module] (https://www.w3.org/TR/css3-multicol/) permet de disposer un contenu sous formes de colonnes.

Les autres techniques, comme [CSS Flexible Box Layout Module Level 1] (https://www.w3.org/TR/css-flexbox-1/), les tableaux et les grilles, autorisent la création de colonnes. Cependant, ces possibilités sont satisfaisantes exclusivement quand le contenu est statique. Si nous écrivons un livre, le contenu sera immuable et les modifications mineures. Si nous publions un journal, le contenu sera imprévisible !

La mise en page avec de multiples colonnes présente surtout un intérêt pour les écrans larges : les lignes trop longues découragent le lecteur et sont inesthétiques.

À l'heure où nous rédigeons ces lignes, le support des navigateurs est insuffisant : il nécessite le recours à des propriétés préfixées pour Google Chrome, Mozilla Firefox, Safari et Opera, comme l'indique [Can I use] (http://caniuse.com/#feat=multicolumn).

Sans balise de formatage, le contenu multi-colonnes s'affiche correctement.

En revanche, dès que l'on utilise une balise par exemple pour former un paragraphe, le contenu de la première ligne est décalé. Pour y remédier, comme le montre notre exemple, il convient de supprimer la marge supérieure du premier élément. D'après nos tests, Mozilla Firefox, Google Chrome et Microsoft Edge n'attribuent pas de marge supérieure aux éléments qui suivent quand ils débutent dans une nouvelle colonne.

Ressources

Raw
column.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Utiliser le module Multi-column</title>
<style>
.column {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
-moz-column-fill: auto;
column-fill: balance; /* Spécifie si le contenu doit être équilibré ou pas verticalement. Peut être défini également avec 'auto' : les éléments ne seront pas équilibrés. */
-moz-column-gap: 2em;
-webkit-column-gap: 2em;
column-gap: 2em;
-webkit-column-rule: 0.25em solid red;
-moz-column-rule: 0.25em solid red;
column-rule: 0.25em solid red;
/* Spécifie sur le contenu d'un élément peut être coupé ou pas d'une colonne à l'autre. */
/* Peut être défini également avec 'avoid' : le contenu de l'élément ne devra pas être coupé . */
-webkit-column-break-inside: auto; /* Chrome, Safari, Opera */
page-break-inside: auto; /* Firefox */
break-inside: auto; /* IE 10+ */
}
.column > :first-child { /* .column > :first-child:not(:only-of-type) */
margin-top: 0;
}
/*
https://css-tricks.com/snippets/css/remove-margins-first-element/
:first-child { margin-top: 0 !important; margin-left: 0 !important;}
:last-child { margin-bottom: 0 !important; margin-right: 0 !important; }
*/
}
</style>
</head>
<body>
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment