{"id":285,"date":"2025-08-16T16:25:39","date_gmt":"2025-08-16T14:25:39","guid":{"rendered":"https:\/\/jagullo.fr\/blog\/?p=285"},"modified":"2025-08-17T12:27:33","modified_gmt":"2025-08-17T10:27:33","slug":"la-grille-masonry-en-web-design","status":"publish","type":"post","link":"https:\/\/jagullo.fr\/blog\/la-grille-masonry-en-web-design\/","title":{"rendered":"La grille masonry en web design"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"definition-de-la-grille-masonry\">D\u00e9finition du composant masonry grid<\/h2>\n\n\n\n<p class=\"has-text-align-left\">Le composant graphique masonry grid ou grille masonry est une grille HTML permettant d&rsquo;afficher des \u00e9l\u00e9ments d&rsquo;une fa\u00e7on structur\u00e9e dans des colonnes ou des lignes qui se repositionnent en JavaScript. Elle s&rsquo;utilise pour <strong>des images, des blocs de textes ou n&rsquo;importe quels m\u00e9dias.<\/strong> Son principe repose sur le fait que chaque \u00e9l\u00e9ment s&#8217;empile de fa\u00e7on optimale dans les colonnes pour occuper l&rsquo;espace disponible en limitant les zones blanches. Le nombre de colonnes est d\u00e9fini en fonction de la largeur de la page, plus la largeur de la page est r\u00e9duite moins de colonnes s&rsquo;affichent.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Exemple d&rsquo;une grille masonry<\/h2>\n\n\n\n<div class=\"masonry-css\">\n  <div class=\"masonry-css-item\">\n    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2022\/02\/placeholder_300x300.png\" height=\"300\" width=\"300\" alt=\"Espace pour la gille Mansory 300x300\">\n  <\/div>\n  <div class=\"masonry-css-item\">\n    <div class=\"callout\">Times New Roman est une police de caract\u00e8re avec empattement connue et r\u00e9pandue, faisant partie de la famille des r\u00e9ales. Elle est apparue en 1932 dans le journal londonien The Times (police Times), pour lequel elle a \u00e9t\u00e9 dessin\u00e9e par Victor Lardent sous la direction de Stanley Morison (Monotype). <\/div>\n  <\/div>\n  <div class=\"masonry-css-item\">\n    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2022\/02\/placeholder_700x200.png\" width=\"700\" height=\"200\" alt=\"Espace pour la gille Mansory 700x200\">\n  <\/div>\n  <div class=\"masonry-css-item\">\n    <div class=\"callout\">En typographie, les empattements sont les petites extensions qui terminent les extr\u00e9mit\u00e9s des caract\u00e8res dans certaines polices d\u2019\u00e9criture, dites avec empattement (au singulier\u202f; serif en anglais), que l\u2019on oppose aux polices sans empattement (sans serif).<\/div>\n  <\/div>\n  <div class=\"masonry-css-item\">\n    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2022\/02\/placeholder_300x600.png\" width=\"300\" height=\"600\" alt=\"Espace pour la gille Mansory 300x600\">\n  <\/div>\n  <div class=\"masonry-css-item\">\n    <div class=\"callout\">Didot est un groupe de polices avec empattements n\u00e9o-classique, nomm\u00e9 d\u2019apr\u00e8s le graveur Firmin Didot. Les premiers caract\u00e8res Didot sont grav\u00e9s et fondus \u00e0 Paris par Firmin Didot entre 1784 et 1811, et utilis\u00e9s par l\u2019imprimeur Pierre Didot, son fr\u00e8re.<\/div>\n  <\/div>\n  <div class=\"masonry-css-item\">\n    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2022\/02\/placeholder_300x200.png\" width=\"300\" height=\"200\" alt=\"Espace pour la gille Mansory 300x200\">\n  <\/div>\n  <div class=\"masonry-css-item\">\n    <div class=\"callout\">En typographie, une ligature est la fusion de deux ou trois graph\u00e8mes d\u2019une \u00e9criture pour en former un nouveau, consid\u00e9r\u00e9 ou non comme un caract\u00e8re \u00e0 part enti\u00e8re.<\/div>\n  <\/div>\n  <div class=\"masonry-css-item\">\n    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2022\/02\/placeholder_700x200.png\" width=\"700\" height=\"200\" alt=\"Espace pour la gille Mansory 700x200\">\n  <\/div>\n  <div class=\"masonry-css-item\">\n    <div class=\"callout\">Garamond est un groupe de polices serif, nomm\u00e9 d\u2019apr\u00e8s le graveur Claude Garamont (vers 1480-1561), \u00e0 l\u2019origine de la famille des \u00ab garaldes \u00bb. La plupart des polices d\u2019\u00e9criture qui portent aujourd\u2019hui le nom de \u00ab Garamond \u00bb sont d\u00e9riv\u00e9es du travail ult\u00e9rieur du typographe Jean Jannon.<\/div>\n  <\/div>\n  <div class=\"masonry-css-item\">\n    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2022\/02\/placeholder_300x300.png\" height=\"300\" width=\"300\" alt=\"Espace pour la gille Mansory 300x300\">\n  <\/div>\n  <div class=\"masonry-css-item\">\n    <div class=\"callout\">Une fonderie typographique est une entreprise qui r\u00e9alise des polices de caract\u00e8res pour l&rsquo;imprimerie. \u00c0 l&rsquo;origine, entre les xve et xxe si\u00e8cles, il s&rsquo;agit de concevoir et de fabriquer des caract\u00e8res en relief, en plomb, pour la typographie.<\/div>\n  <\/div>\n  <div class=\"masonry-css-item\">\n    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2022\/02\/placeholder_300x200.png\" width=\"300\" height=\"200\" alt=\"Espace pour la gille Mansory 300x200\">\n  <\/div>\n  <div class=\"masonry-css-item\">\n    <div class=\"callout\">Futura est une police de caract\u00e8res lin\u00e9ale g\u00e9om\u00e9trique con\u00e7ue par Paul Renner, entre 1924 et 1927, pour la fonderie Bauer (Bauersche Gie\u00dferei). Elle participe, avec les productions de Jan Tschichold, \u00e0 la modernit\u00e9 contemporaine du Bauhaus.<\/div>\n  <\/div>\n  <div class=\"masonry-css-item\">\n    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2022\/02\/placeholder_300x600.png\" width=\"300\" height=\"600\" alt=\"Espace pour la gille Mansory 300x600\">\n  <\/div>\n  <div class=\"masonry-css-item\">\n    <div class=\"callout\">En typographie, la graisse est l\u2019\u00e9paisseur d\u2019un trait ou d\u2019un caract\u00e8re. En augmentant la graisse d\u2019un caract\u00e8re maigre, on obtient un caract\u00e8re demi-gras, puis gras, et ainsi de suite.<\/div>\n  <\/div>\n  <div class=\"masonry-css-item\">\n    <div class=\"callout\">Helvetica est une police de caract\u00e8res lin\u00e9ale sans empattement (en anglais, sans serif), cr\u00e9\u00e9e en 1957 par Max Miedinger \u00e0 B\u00e2le, qui l&rsquo;a dessin\u00e9e dans un objectif pr\u00e9cis : avoir une police la plus harmonieuse possible1.<\/div>\n  <\/div>\n  <div class=\"masonry-css-item\">\n    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2022\/02\/placeholder_300x200.png\" width=\"300\" height=\"200\" alt=\"Espace pour la gille Mansory 300x200\">\n  <\/div>\n  <div class=\"masonry-css-item\">\n    <div class=\"callout\">En typographie, le corps est la taille d&rsquo;une fonte de caract\u00e8res, mesur\u00e9e en points typographiques : un texte en corps 10 est un texte compos\u00e9 dans une police dont le corps est de dix points.<\/div>\n  <\/div>\n  <div class=\"masonry-css-item\">\n    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2022\/02\/placeholder_300x300.png\" height=\"300\" width=\"300\" alt=\"Espace pour la gille Mansory 300x300\">\n  <\/div>\n  <div class=\"masonry-css-item has-text-align-center\">\n    <div class=\"callout\"><strong>Source Wikip\u00e9dia<\/strong><\/div>\n  <\/div>\n<\/div>\n<style>\n.masonry-css{-webkit-column-count:1;column-count:1;-webkit-column-gap:1rem;column-gap:1rem;padding:20px;margin:20px 0;background-color:#f7f7f7;border:1px solid #e1e1e1;}\n@media screen and (min-width: 25em) {\n  .masonry-css{-webkit-column-count:2;column-count:2;}\n}\n@media screen and (min-width: 37.5em) {\n  .masonry-css{-webkit-column-count:3;column-count:3;}\n}\n@media screen and (min-width: 50em) {\n  .masonry-css{-webkit-column-count:4;column-count:4;}\n}\n@media screen and (min-width: 68.75em) {\n  .masonry-css{-webkit-column-count:5;column-count:5;}\n}\n.masonry-css-item{-webkit-column-break-inside:avoid;break-inside:avoid;margin-bottom:1rem;}\n<\/style>\n<script src=\"https:\/\/jagullo.fr\/blog\/wp-content\/themes\/Extra-child\/assets\/js\/masonry.pkgd.min.js\" async=\"\"><\/script>\n\n\n\n<p>Comme on peut le voir dans l&rsquo;exemple ci-dessus, la grille <strong>se restructure au redimensionnement <\/strong>de la fen\u00eatre. Elle permet un affichage optimis\u00e9 sur tous les supports de navigation que ce soit mobile, tablette ou bureau. Cette forme de pr\u00e9sentation est adapt\u00e9e \u00e0 de nombreux cas d&rsquo;utilisation comme une galerie de photos, de vid\u00e9os ou une liste d&rsquo;articles ou de news. On peut tr\u00e8s bien y afficher n&rsquo;importe quel type de contenu comme une liste de recette ou de r\u00e9sultats sportifs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"un-composant-venant-de-la-presse\">Un composant venant de la presse<\/h2>\n\n\n\n<p>La grille masonry est une <strong>\u00e9volution du syst\u00e8me de grille<\/strong> utilis\u00e9 par la presse dans les journaux et les magazines. L&rsquo;industrie du web est la continuit\u00e9 logique en terme technique et graphique de l&rsquo;industrie de la presse. Elle s&rsquo;approprie certains codes de mise en page, de design et de typographie pour les afficher d&rsquo;une fa\u00e7on plus moderne. Le web regroupe plus d&rsquo;un si\u00e8cle d&rsquo;\u00e9volution de l&rsquo;industrie de la presse en exploitant tous ces acquis d&rsquo;une fa\u00e7on num\u00e9rique.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"640\" src=\"https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2023\/01\/illustration_masonry-grid.png\" alt=\"La grille masonry est un composant HTML, CSS et JavaScript\" class=\"wp-image-2710\" style=\"width:720px;height:480px\" srcset=\"https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2023\/01\/illustration_masonry-grid.png 960w, https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2023\/01\/illustration_masonry-grid-300x200.png 300w, https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2023\/01\/illustration_masonry-grid-768x512.png 768w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><figcaption class=\"wp-element-caption\">La grille masonry est un composant HTML, CSS et JavaScript<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"comment-l-implementer\">Comment l&rsquo;impl\u00e9menter ?<\/h2>\n\n\n\n<p class=\"list-heading\">Coder de A \u00e0 Z une grille masonry est une t\u00e2che un peu longue et fastidieuse. En fonction des technologies utilis\u00e9 par le d\u00e9veloppeur web <strong>Angular, Vuejs, React <\/strong>ou<strong> jQuery,<\/strong> il existe plusieurs librairies open sources proposant de l&rsquo;incorporer. Elle est disponible nativement dans WordPress, mais n\u00e9cessite de savoir coder pour \u00eatre mise en place. Ci-dessous quelques projets open sources impl\u00e9mentant la grille masonry :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/masonry.desandro.com\/\" data-type=\"URL\" data-id=\"https:\/\/masonry.desandro.com\/\" target=\"_blank\">Le projet masonry<\/a> du d\u00e9veloppeur David DeSandro<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.1\/examples\/masonry\/\" target=\"_blank\">Une page d&rsquo;exemple<\/a> du framework Bootstrap<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/get.foundation\/building-blocks\/blocks\/masonry-css.html\" data-type=\"URL\" data-id=\"https:\/\/get.foundation\/building-blocks\/blocks\/masonry-css.html\" target=\"_blank\">Le container masonry<\/a> du framework Foundation<\/li>\n<\/ul>\n<div class=\"list-tags\"><a href=\"https:\/\/jagullo.fr\/blog\/tag\/css-sass-less\/\" class=\"link-tag\" title=\"CSS \/ SASS \/ LESS\">CSS \/ SASS \/ LESS<\/a><a href=\"https:\/\/jagullo.fr\/blog\/tag\/html\/\" class=\"link-tag\" title=\"HTML\">HTML<\/a><a href=\"https:\/\/jagullo.fr\/blog\/tag\/javascript\/\" class=\"link-tag\" title=\"JavaScript\">JavaScript<\/a><a href=\"https:\/\/jagullo.fr\/blog\/tag\/jquery\/\" class=\"link-tag\" title=\"jQuery\">jQuery<\/a><\/div>","protected":false},"excerpt":{"rendered":"<p>D\u00e9finition du composant masonry grid Le composant graphique masonry grid ou grille masonry est une grille HTML permettant d&rsquo;afficher des \u00e9l\u00e9ments d&rsquo;une fa\u00e7on structur\u00e9e dans des colonnes ou des lignes qui se repositionnent en JavaScript. Elle s&rsquo;utilise pour des images, des blocs de textes ou n&rsquo;importe quels m\u00e9dias. Son principe repose sur le fait que [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2710,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[1],"tags":[28,30,33,38],"class_list":["post-285","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-graphisme","tag-css-sass-less","tag-html","tag-javascript","tag-jquery","et-has-post-format-content","et_post_format-et-post-format-standard"],"_links":{"self":[{"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/posts\/285","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/comments?post=285"}],"version-history":[{"count":3,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/posts\/285\/revisions"}],"predecessor-version":[{"id":3986,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/posts\/285\/revisions\/3986"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/media\/2710"}],"wp:attachment":[{"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/media?parent=285"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/categories?post=285"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/tags?post=285"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}