Disposition du Contenu avec Grid CSS Layout<\/title>\n<\/head>\n<body>\n\n\n<p><strong>Disposition du Contenu avec Grid CSS Layout<\/strong> est une technique puissante pour cr\u00e9er des mises en page web flexibles et responsives. Ma\u00eetriser le Grid Layout permet de structurer facilement des \u00e9l\u00e9ments de contenu en ligne et en colonnes, facilitant ainsi la t\u00e2che des d\u00e9veloppeurs web pour cr\u00e9er des interfaces utilisateur sophistiqu\u00e9es et \u00e9l\u00e9gantes. Voyons comment utiliser Grid CSS Layouts pour am\u00e9liorer vos conceptions web gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 <strong>Grid CSS Layout<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n <iframe src=\"https:\/\/player.vimeo.com\/video\/586679387?dnt=1&fullscreen=0&pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n \n \n <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n <\/div>\n\n \n <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n var iframe = document.getElementById('vimeoPlayer');\n var player = new Vimeo.Player(iframe);\n var isPopupDisplayed = false;\n\n player.on('play', function() {\n if (!isPopupDisplayed) {\n player.on('timeupdate', function(data) {\n if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n \/\/ Pause the video and display the popup\n player.pause().then(function() {\n if (window.innerWidth > 768) {\n document.querySelector('.desktop-popup').style.display = 'block';\n } else {\n document.querySelector('.mobile-popup').style.display = 'block';\n }\n fetchPriceAndUpdatePopup();\n isPopupDisplayed = true;\n });\n }\n });\n }\n });\n\n function fetchPriceAndUpdatePopup() {\n fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n .then(response => response.text())\n .then(html => {\n var parser = new DOMParser();\n var fetchedDoc = parser.parseFromString(html, 'text\/html');\n var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n document.getElementById('price').textContent = price;\n document.getElementById('priceMobile').textContent = price;\n document.querySelector('.desktop-popup del').textContent = originalPrice;\n document.querySelector('.mobile-popup del').textContent = originalPrice;\n })\n .catch(error => console.error('Error fetching the price:', error));\n }\n\n function closePopup() {\n document.querySelector('.desktop-popup').style.display = 'none';\n document.querySelector('.mobile-popup').style.display = 'none';\n player.play(); \/\/ Allows resuming the video only after closing the popup\n }\n});\n<\/script>\n\n\n\n<p><strong>Grid CSS Layout<\/strong> est un puissant module CSS introduit pour r\u00e9soudre les probl\u00e8mes courants de mise en page en fournissant un agencement bidimensionnel. Contrairement aux techniques de mise en page pr\u00e9c\u00e9dentes qui fonctionnent majoritairement en lignes (flexbox) ou en blocs (floating), le Grid Layout permet de contr\u00f4ler \u00e0 la fois les axes horizontaux et verticaux.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9finir une Grille de Base<\/h3>\n\n\n\n<p>Pour commencer, nous allons cr\u00e9er une structure de base en utilisant Grid CSS. Supposons que nous souhaitons cr\u00e9er une grille \u00e0 3 colonnes et 2 lignes. Voici comment proc\u00e9der :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.grid-container {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: repeat(2, 1fr);\n gap: 10px;\n}\n\n.grid-item {\n background-color: #4CAF50;\n padding: 20px;\n font-size: 30px;\n text-align: center;\n}\n<\/code><\/pre>\n\n\n\n<p>Ensuite, ajoutons cette configuration HTML pour voir notre grille en action :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code><div class=\"grid-container\">\n <div class=\"grid-item\">1<\/div>\n <div class=\"grid-item\">2<\/div>\n <div class=\"grid-item\">3<\/div>\n <div class=\"grid-item\">4<\/div>\n <div class=\"grid-item\">5<\/div>\n <div class=\"grid-item\">6<\/div>\n<\/div>\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Contr\u00f4ler la Disposition des \u00c9l\u00e9ments avec Grid Areas<\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>grid-area<\/code> permet de positionner facilement les \u00e9l\u00e9ments dans la grille. Voici comment vous pouvez utiliser cette propri\u00e9t\u00e9 pour cr\u00e9er une disposition plus complexe :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.grid-container {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n grid-template-rows: auto;\n gap: 10px;\n grid-template-areas:\n \"header header header\"\n \"menu main main\"\n \"footer footer footer\";\n}\n\n.grid-item-header {\n grid-area: header;\n background-color: #2196F3;\n}\n\n.grid-item-menu {\n grid-area: menu;\n background-color: #8BC34A;\n}\n\n.grid-item-main {\n grid-area: main;\n background-color: #FFC107;\n}\n\n.grid-item-footer {\n grid-area: footer;\n background-color: #F44336;\n}\n<\/code><\/pre>\n\n\n\n<p>Voici le HTML correspondant pour cette grille configur\u00e9e :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code><div class=\"grid-container\">\n <div class=\"grid-item-header\">Header<\/div>\n <div class=\"grid-item-menu\">Menu<\/div>\n <div class=\"grid-item-main\">Main<\/div>\n <div class=\"grid-item-footer\">Footer<\/div>\n<\/div>\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Rendre la Grille Responsive<\/h3>\n\n\n\n<p>L’une des principales forces du Grid CSS Layout est sa capacit\u00e9 \u00e0 cr\u00e9er des mises en page responsives. Utilisez les media queries pour ajuster la grille en fonction de la taille de l’\u00e9cran :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>@media (max-width: 600px) {\n .grid-container {\n grid-template-columns: 1fr;\n grid-template-areas:\n \"header\"\n \"menu\"\n \"main\"\n \"footer\";\n }\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Grid Alignments pour le Positionnement Pr\u00e9cis<\/h3>\n\n\n\n<p>Pr\u00e9f\u00e9rez-vous aligner certains \u00e9l\u00e9ments plus efficacement ? Utilisez les propri\u00e9t\u00e9s <code>justify-items<\/code>, <code>align-items<\/code>, <code>justify-self<\/code>, et <code>align-self<\/code> pour un contr\u00f4le pr\u00e9cis :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.grid-container {\n display: grid;\n grid-template-columns: 200px 1fr;\n grid-template-rows: 100px 200px;\n gap: 10px;\n justify-items: center;\n align-items: center;\n}\n\n.grid-item {\n background-color: #4CAF50;\n padding: 20px;\n font-size: 30px;\n text-align: center;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">G\u00e9rer les Espaces Vid\u00e9s dans la Grille<\/h3>\n\n\n\n<p>Il est possible que certains \u00e9l\u00e9ments ne remplissent pas toutes les cellules de la grille. Voici comment g\u00e9rer les espaces vides :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.grid-container {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n gap: 10px;\n}\n\n.grid-item {\n background-color: #4CAF50;\n padding: 20px;\n font-size: 30px;\n text-align: center;\n}\n\n.grid-item-empty {\n grid-column: auto;\n grid-row: auto;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s de Disposition CSS Grid<\/h3>\n\n\n\n<p>Pour approfondir, explorons quelques exemples avanc\u00e9s de disposition CSS Grid qui montrent comment manipuler diff\u00e9rentes techniques pour des conceptions plus complexes.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Cr\u00e9ation de Layout de Carte<\/h4>\n\n\n\n<p>Imaginez une disposition o\u00f9 vous utilisez des cartes pour les publications sur un blog. Voici un exemple de mise en page de carte en utilisant Grid Layout :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code><div class=\"grid-container\">\n <div class=\"grid-item card\">\n <h3>Article 1<\/h3>\n <p>Contenu de l'article...<\/p>\n <\/div>\n <div class=\"grid-item card\">\n <h3>Article 2<\/h3>\n <p>Contenu de l'article...<\/p>\n <\/div>\n \n<\/div>\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Dispositions de Galerie d’Images<\/h4>\n\n\n\n<p>Pour cr\u00e9er des galeries d’images responsives, Grid Layout est tr\u00e8s pratique :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code><div class=\"grid-container gallery\">\n <div class=\"grid-item\"><img src=\"image1.jpg\" alt=\"Image 1\"><\/div>\n <div class=\"grid-item\"><img src=\"image2.jpg\" alt=\"Image 2\"><\/div>\n <div class=\"grid-item\"><img src=\"image3.jpg\" alt=\"Image 3\"><\/div>\n<\/div>\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Landing Pages Modernes<\/h4>\n\n\n\n<p>Les landing pages modernes b\u00e9n\u00e9ficient \u00e9galement du Grid Layout pour une organisation efficace :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code><div class=\"grid-container landing-page\">\n <header class=\"grid-item header\"><h1>Bienvenue sur notre site<\/h1><\/header>\n <nav class=\"grid-item nav\">Menu<\/nav>\n <main class=\"grid-item main\">Article principal<\/main>\n <aside class=\"grid-item aside\">Barre lat\u00e9rale<\/aside>\n <footer class=\"grid-item footer\">Pied de page<\/footer>\n<\/div>\n\n<style>\n.grid-container {\n display: grid;\n grid-template-areas:\n \"header header header\"\n \"nav main aside\"\n \"footer footer footer\";\n gap: 10px;\n}\n\n.header { grid-area: header; }\n.nav { grid-area: nav; }\n.main { grid-area: main; }\n.aside { grid-area: aside; }\n.footer { grid-area: footer; }\n<\/style>\n<\/code><\/pre>\n\n\n\n<p>Martin Fowler, dans ses articles sur les principes de la conception, d\u00e9crit comment des techniques modernes comme le Grid Layout CSS permettent une bien meilleure s\u00e9paration des pr\u00e9occupations, rendant le code HTML plus s\u00e9mantique et maintenable. Pour plus de d\u00e9tails, vous pouvez vous r\u00e9f\u00e9rer \u00e0 des ressources fiables telles que <a href=\"https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/\" target=\"_blank\" rel=\"noopener\">le guide complet de CSS Tricks sur Grid Layout<\/a>, ou <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Grid_Layout\" target=\"_blank\" rel=\"noopener\">la documentation officielle de Mozilla<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading","protected":false},"excerpt":{"rendered":"<p>Disposition du Contenu avec Grid CSS Layout Disposition du Contenu avec Grid CSS Layout est une technique puissante pour cr\u00e9er des mises en page web…<\/p>\n","protected":false},"author":2,"featured_media":2723,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5463","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3-css","category-2-html","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5463","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5463"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5463\/revisions"}],"predecessor-version":[{"id":5464,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5463\/revisions\/5464"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2723"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5463"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5463"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5463"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":5463,"date":"2024-08-27T20:17:17","date_gmt":"2024-08-27T20:17:17","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/disposition-contenu-grid-css-layout\/"},"modified":"2024-12-06T19:57:32","modified_gmt":"2024-12-06T19:57:32","slug":"disposition-contenu-grid-css-layout","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/disposition-contenu-grid-css-layout\/","title":{"rendered":"11.5 Disposition du Contenu avec Grid CSS Layout"},"content":{"rendered":"\n\n\n\n\nDisposition du Contenu avec Grid CSS Layout<\/title>\n<\/head>\n<body>\n\n\n<p><strong>Disposition du Contenu avec Grid CSS Layout<\/strong> est une technique puissante pour cr\u00e9er des mises en page web flexibles et responsives. Ma\u00eetriser le Grid Layout permet de structurer facilement des \u00e9l\u00e9ments de contenu en ligne et en colonnes, facilitant ainsi la t\u00e2che des d\u00e9veloppeurs web pour cr\u00e9er des interfaces utilisateur sophistiqu\u00e9es et \u00e9l\u00e9gantes. Voyons comment utiliser Grid CSS Layouts pour am\u00e9liorer vos conceptions web gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 <strong>Grid CSS Layout<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n <iframe src=\"https:\/\/player.vimeo.com\/video\/586679387?dnt=1&fullscreen=0&pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n \n \n <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n <\/div>\n\n \n <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n var iframe = document.getElementById('vimeoPlayer');\n var player = new Vimeo.Player(iframe);\n var isPopupDisplayed = false;\n\n player.on('play', function() {\n if (!isPopupDisplayed) {\n player.on('timeupdate', function(data) {\n if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n \/\/ Pause the video and display the popup\n player.pause().then(function() {\n if (window.innerWidth > 768) {\n document.querySelector('.desktop-popup').style.display = 'block';\n } else {\n document.querySelector('.mobile-popup').style.display = 'block';\n }\n fetchPriceAndUpdatePopup();\n isPopupDisplayed = true;\n });\n }\n });\n }\n });\n\n function fetchPriceAndUpdatePopup() {\n fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n .then(response => response.text())\n .then(html => {\n var parser = new DOMParser();\n var fetchedDoc = parser.parseFromString(html, 'text\/html');\n var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n document.getElementById('price').textContent = price;\n document.getElementById('priceMobile').textContent = price;\n document.querySelector('.desktop-popup del').textContent = originalPrice;\n document.querySelector('.mobile-popup del').textContent = originalPrice;\n })\n .catch(error => console.error('Error fetching the price:', error));\n }\n\n function closePopup() {\n document.querySelector('.desktop-popup').style.display = 'none';\n document.querySelector('.mobile-popup').style.display = 'none';\n player.play(); \/\/ Allows resuming the video only after closing the popup\n }\n});\n<\/script>\n\n\n\n<p><strong>Grid CSS Layout<\/strong> est un puissant module CSS introduit pour r\u00e9soudre les probl\u00e8mes courants de mise en page en fournissant un agencement bidimensionnel. Contrairement aux techniques de mise en page pr\u00e9c\u00e9dentes qui fonctionnent majoritairement en lignes (flexbox) ou en blocs (floating), le Grid Layout permet de contr\u00f4ler \u00e0 la fois les axes horizontaux et verticaux.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9finir une Grille de Base<\/h3>\n\n\n\n<p>Pour commencer, nous allons cr\u00e9er une structure de base en utilisant Grid CSS. Supposons que nous souhaitons cr\u00e9er une grille \u00e0 3 colonnes et 2 lignes. Voici comment proc\u00e9der :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.grid-container {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: repeat(2, 1fr);\n gap: 10px;\n}\n\n.grid-item {\n background-color: #4CAF50;\n padding: 20px;\n font-size: 30px;\n text-align: center;\n}\n<\/code><\/pre>\n\n\n\n<p>Ensuite, ajoutons cette configuration HTML pour voir notre grille en action :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code><div class=\"grid-container\">\n <div class=\"grid-item\">1<\/div>\n <div class=\"grid-item\">2<\/div>\n <div class=\"grid-item\">3<\/div>\n <div class=\"grid-item\">4<\/div>\n <div class=\"grid-item\">5<\/div>\n <div class=\"grid-item\">6<\/div>\n<\/div>\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Contr\u00f4ler la Disposition des \u00c9l\u00e9ments avec Grid Areas<\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>grid-area<\/code> permet de positionner facilement les \u00e9l\u00e9ments dans la grille. Voici comment vous pouvez utiliser cette propri\u00e9t\u00e9 pour cr\u00e9er une disposition plus complexe :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.grid-container {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n grid-template-rows: auto;\n gap: 10px;\n grid-template-areas:\n \"header header header\"\n \"menu main main\"\n \"footer footer footer\";\n}\n\n.grid-item-header {\n grid-area: header;\n background-color: #2196F3;\n}\n\n.grid-item-menu {\n grid-area: menu;\n background-color: #8BC34A;\n}\n\n.grid-item-main {\n grid-area: main;\n background-color: #FFC107;\n}\n\n.grid-item-footer {\n grid-area: footer;\n background-color: #F44336;\n}\n<\/code><\/pre>\n\n\n\n<p>Voici le HTML correspondant pour cette grille configur\u00e9e :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code><div class=\"grid-container\">\n <div class=\"grid-item-header\">Header<\/div>\n <div class=\"grid-item-menu\">Menu<\/div>\n <div class=\"grid-item-main\">Main<\/div>\n <div class=\"grid-item-footer\">Footer<\/div>\n<\/div>\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Rendre la Grille Responsive<\/h3>\n\n\n\n<p>L’une des principales forces du Grid CSS Layout est sa capacit\u00e9 \u00e0 cr\u00e9er des mises en page responsives. Utilisez les media queries pour ajuster la grille en fonction de la taille de l’\u00e9cran :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>@media (max-width: 600px) {\n .grid-container {\n grid-template-columns: 1fr;\n grid-template-areas:\n \"header\"\n \"menu\"\n \"main\"\n \"footer\";\n }\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Grid Alignments pour le Positionnement Pr\u00e9cis<\/h3>\n\n\n\n<p>Pr\u00e9f\u00e9rez-vous aligner certains \u00e9l\u00e9ments plus efficacement ? Utilisez les propri\u00e9t\u00e9s <code>justify-items<\/code>, <code>align-items<\/code>, <code>justify-self<\/code>, et <code>align-self<\/code> pour un contr\u00f4le pr\u00e9cis :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.grid-container {\n display: grid;\n grid-template-columns: 200px 1fr;\n grid-template-rows: 100px 200px;\n gap: 10px;\n justify-items: center;\n align-items: center;\n}\n\n.grid-item {\n background-color: #4CAF50;\n padding: 20px;\n font-size: 30px;\n text-align: center;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">G\u00e9rer les Espaces Vid\u00e9s dans la Grille<\/h3>\n\n\n\n<p>Il est possible que certains \u00e9l\u00e9ments ne remplissent pas toutes les cellules de la grille. Voici comment g\u00e9rer les espaces vides :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.grid-container {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n gap: 10px;\n}\n\n.grid-item {\n background-color: #4CAF50;\n padding: 20px;\n font-size: 30px;\n text-align: center;\n}\n\n.grid-item-empty {\n grid-column: auto;\n grid-row: auto;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s de Disposition CSS Grid<\/h3>\n\n\n\n<p>Pour approfondir, explorons quelques exemples avanc\u00e9s de disposition CSS Grid qui montrent comment manipuler diff\u00e9rentes techniques pour des conceptions plus complexes.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Cr\u00e9ation de Layout de Carte<\/h4>\n\n\n\n<p>Imaginez une disposition o\u00f9 vous utilisez des cartes pour les publications sur un blog. Voici un exemple de mise en page de carte en utilisant Grid Layout :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code><div class=\"grid-container\">\n <div class=\"grid-item card\">\n <h3>Article 1<\/h3>\n <p>Contenu de l'article...<\/p>\n <\/div>\n <div class=\"grid-item card\">\n <h3>Article 2<\/h3>\n <p>Contenu de l'article...<\/p>\n <\/div>\n \n<\/div>\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Dispositions de Galerie d’Images<\/h4>\n\n\n\n<p>Pour cr\u00e9er des galeries d’images responsives, Grid Layout est tr\u00e8s pratique :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code><div class=\"grid-container gallery\">\n <div class=\"grid-item\"><img src=\"image1.jpg\" alt=\"Image 1\"><\/div>\n <div class=\"grid-item\"><img src=\"image2.jpg\" alt=\"Image 2\"><\/div>\n <div class=\"grid-item\"><img src=\"image3.jpg\" alt=\"Image 3\"><\/div>\n<\/div>\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Landing Pages Modernes<\/h4>\n\n\n\n<p>Les landing pages modernes b\u00e9n\u00e9ficient \u00e9galement du Grid Layout pour une organisation efficace :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code><div class=\"grid-container landing-page\">\n <header class=\"grid-item header\"><h1>Bienvenue sur notre site<\/h1><\/header>\n <nav class=\"grid-item nav\">Menu<\/nav>\n <main class=\"grid-item main\">Article principal<\/main>\n <aside class=\"grid-item aside\">Barre lat\u00e9rale<\/aside>\n <footer class=\"grid-item footer\">Pied de page<\/footer>\n<\/div>\n\n<style>\n.grid-container {\n display: grid;\n grid-template-areas:\n \"header header header\"\n \"nav main aside\"\n \"footer footer footer\";\n gap: 10px;\n}\n\n.header { grid-area: header; }\n.nav { grid-area: nav; }\n.main { grid-area: main; }\n.aside { grid-area: aside; }\n.footer { grid-area: footer; }\n<\/style>\n<\/code><\/pre>\n\n\n\n<p>Martin Fowler, dans ses articles sur les principes de la conception, d\u00e9crit comment des techniques modernes comme le Grid Layout CSS permettent une bien meilleure s\u00e9paration des pr\u00e9occupations, rendant le code HTML plus s\u00e9mantique et maintenable. Pour plus de d\u00e9tails, vous pouvez vous r\u00e9f\u00e9rer \u00e0 des ressources fiables telles que <a href=\"https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/\" target=\"_blank\" rel=\"noopener\">le guide complet de CSS Tricks sur Grid Layout<\/a>, ou <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Grid_Layout\" target=\"_blank\" rel=\"noopener\">la documentation officielle de Mozilla<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading","protected":false},"excerpt":{"rendered":"<p>Disposition du Contenu avec Grid CSS Layout Disposition du Contenu avec Grid CSS Layout est une technique puissante pour cr\u00e9er des mises en page web…<\/p>\n","protected":false},"author":2,"featured_media":2723,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5463","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3-css","category-2-html","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5463","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5463"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5463\/revisions"}],"predecessor-version":[{"id":5464,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5463\/revisions\/5464"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2723"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5463"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5463"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5463"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}