{"id":5449,"date":"2024-08-27T19:48:37","date_gmt":"2024-08-27T19:48:37","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/zones-grille-nommees-css-utilisation\/"},"modified":"2024-12-05T15:44:33","modified_gmt":"2024-12-05T15:44:33","slug":"zones-grille-nommees-css-utilisation","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/zones-grille-nommees-css-utilisation\/","title":{"rendered":"10.9 Zones de Grille Nomm\u00e9es en CSS : Utilisation"},"content":{"rendered":"\n\n\n<p><strong>Utilisation des Zones de Grille Nomm\u00e9es en CSS<\/strong> constitue une astuce essentielle pour optimiser l\u2019organisation et le design de vos mises en page responsives. Comprendre comment d\u00e9finir et manipuler les <strong>zones de grille nomm\u00e9es en CSS<\/strong> est une comp\u00e9tence incontournable pour tout d\u00e9veloppeur ou designer web. Apprenons comment les utiliser efficacement \u00e0 travers des exemples pratiques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Zones de Grille Nomm\u00e9es en CSS<\/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\/586675341?dnt=1&#038;fullscreen=0&#038;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  <!-- Popup Desktop -->\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  <!-- Popup Mobile -->\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>Les zones de grille nomm\u00e9es sont une fonctionnalit\u00e9 offerte par CSS Grid Layout qui permet aux d\u00e9veloppeurs de nommer des zones enti\u00e8res de la grille. Cela facilite grandement le processus de disposition des \u00e9l\u00e9ments \u00e0 l&rsquo;int\u00e9rieur de la grille, rendant le HTML plus lisible et le CSS plus intuitif. Voyons comment d\u00e9finir ces zones et les utiliser dans vos projets web.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9finir des Zones de Grille Nomm\u00e9es<\/h3>\n\n\n\n<p>Pour d\u00e9finir des zones de grille nomm\u00e9es, vous devez utiliser la propri\u00e9t\u00e9 <code>grid-template-areas<\/code>. Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* CSS *\/\n\n.container {\n  display: grid;\n  grid-template-areas:\n    \"header header\"\n    \"sidebar content\"\n    \"footer footer\";\n  grid-template-rows: auto;\n  grid-template-columns: 1fr 2fr;\n}\n\n.header {\n  grid-area: header;\n}\n\n.sidebar {\n  grid-area: sidebar;\n}\n\n.content {\n  grid-area: content;\n}\n\n.footer {\n  grid-area: footer;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Placer des \u00c9l\u00e9ments dans des Zones Nomm\u00e9es<\/h3>\n\n\n\n<p>Une fois les zones d\u00e9finies, vous pouvez facilement placer les \u00e9l\u00e9ments HTML dans ces zones en utilisant l&rsquo;attribut <code>grid-area<\/code> dans votre CSS. Voici comment proc\u00e9der en HTML :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code><!-- HTML -->\n\n<div class=\"container\">\n  <div class=\"header\">Header<\/div>\n  <div class=\"sidebar\">Sidebar<\/div>\n  <div class=\"content\">Content<\/div>\n  <div class=\"footer\">Footer<\/div>\n<\/div>\n<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, le conteneur <code>div<\/code> est configur\u00e9 pour utiliser la grille CSS avec des zones de grille nomm\u00e9es. Chaque \u00e9l\u00e9ment enfant est plac\u00e9 automatiquement dans la zone appropri\u00e9e gr\u00e2ce \u00e0 la d\u00e9claration <code>grid-area<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Rendre la Mise en Page Responsive<\/h3>\n\n\n\n<p>Pour rendre la mise en page responsive, vous pouvez combiner les zones de grille nomm\u00e9es avec des media queries. Par exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* CSS *\/\n\n@media (max-width: 600px) {\n  .container {\n    grid-template-areas:\n      \"header\"\n      \"content\"\n      \"sidebar\"\n      \"footer\";\n    grid-template-columns: 1fr;\n  }\n}\n<\/code><\/pre>\n\n\n\n<p>Cette media query red\u00e9finit les zones de grille pour les \u00e9crans de largeur inf\u00e9rieure \u00e0 600 pixels, assurant que le contenu soit affich\u00e9 de mani\u00e8re claire et coh\u00e9rente sur les appareils mobiles.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Exemple Complet : Disposition d&rsquo;un Blog<\/h3>\n\n\n\n<p>Pour illustrer l&rsquo;utilisation des zones de grille nomm\u00e9es, cr\u00e9ons une mise en page de blog avec une ent\u00eate, une barre lat\u00e9rale, un contenu principal, et un pied de page :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code><!-- HTML -->\n\n<div class=\"blog-container\">\n  <div class=\"blog-header\">Blog Header<\/div>\n  <div class=\"blog-sidebar\">Sidebar<\/div>\n  <div class=\"blog-content\">Main Content<\/div>\n  <div class=\"blog-footer\">Footer<\/div>\n<\/div>\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* CSS *\/\n\n.blog-container {\n  display: grid;\n  grid-template-areas:\n    \"blog-header blog-header\"\n    \"blog-sidebar blog-content\"\n    \"blog-footer blog-footer\";\n  grid-template-columns: 1fr 3fr;\n  gap: 20px;\n}\n\n.blog-header { grid-area: blog-header; }\n.blog-sidebar { grid-area: blog-sidebar; }\n.blog-content { grid-area: blog-content; }\n.blog-footer { grid-area: blog-footer; }\n\n@media (max-width: 600px) {\n  .blog-container {\n    grid-template-areas:\n      \"blog-header\"\n      \"blog-content\"\n      \"blog-sidebar\"\n      \"blog-footer\";\n    grid-template-columns: 1fr;\n  }\n}\n<\/code><\/pre>\n\n\n\n<p>Avec cette configuration, votre blog b\u00e9n\u00e9ficie d&rsquo;une mise en page flexible, claire et responsive, utilisant pleinement les avantages des zones de grille nomm\u00e9es en CSS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples d&rsquo;Utilisation Avanc\u00e9e des Zones de Grille Nomm\u00e9es<\/h3>\n\n\n\n<p>Il existe de nombreuses mani\u00e8res cr\u00e9atives d&rsquo;utiliser les zones de grille nomm\u00e9es pour concevoir des mises en page complexes. Par exemple, si vous souhaitez cr\u00e9er une mise en page \u00e0 trois colonnes pour les articles de votre blog, voici comment vous pouvez le faire :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* CSS pour une mise en page \u00e0 trois colonnes *\/\n\n.three-column-container {\n  display: grid;\n  grid-template-areas:\n    \"header header header\"\n    \"sidebar content aside\"\n    \"footer footer footer\";\n  grid-template-columns: 1fr 2fr 1fr;\n  gap: 10px;\n}\n\n.header { grid-area: header; }\n.sidebar { grid-area: sidebar; }\n.content { grid-area: content; }\n.aside { grid-area: aside; }\n.footer { grid-area: footer; }\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Integrer les Zones de Grille Nomm\u00e9es dans une Mise en Page Responsive<\/h3>\n\n\n\n<p>L&rsquo;int\u00e9gration des zones de grille nomm\u00e9es dans une mise en page responsive n\u00e9cessite une planification minutieuse. Par exemple, dans une mise en page de produit ecommerce, vous pouvez utiliser les techniques de CSS Grid combin\u00e9es avec les media queries pour ajuster l&rsquo;affichage en fonction de la taille de l&rsquo;\u00e9cran :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code><!-- HTML -->\n\n<div class=\"ecommerce-container\">\n  <div class=\"header\">Header<\/div>\n  <div class=\"product-image\">Product Image<\/div>\n  <div class=\"product-details\">Product Details<\/div>\n  <div class=\"footer\">Footer<\/div>\n<\/div>\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* CSS pour une mise en page ecommerce *\/\n\n.ecommerce-container {\n  display: grid;\n  grid-template-areas:\n    \"header header\"\n    \"product-image product-details\"\n    \"footer footer\";\n  grid-template-columns: 1fr 2fr;\n}\n\n.header { grid-area: header; }\n.product-image { grid-area: product-image; }\n.product-details { grid-area: product-details; }\n.footer { grid-area: footer; }\n\n@media (max-width: 600px) {\n  .ecommerce-container {\n    grid-template-areas:\n      \"header\"\n      \"product-image\"\n      \"product-details\"\n      \"footer\";\n    grid-template-columns: 1fr;\n  }\n}\n<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, la disposition des \u00e9l\u00e9ments change en fonction de la taille de l&rsquo;\u00e9cran, assurant ainsi une exp\u00e9rience utilisateur optimale.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Resources Suppl\u00e9mentaires<\/h3>\n\n\n\n<p><p>Pour approfondir vos connaissances sur les grilles CSS et les zones de grille nomm\u00e9es, consultez les ressources suivantes :<\/p>\n<ul>\n  <li><a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/CSS_Grid_Layout\" rel=\"dofollow noopener\" target=\"_blank\">Documentation MDN sur CSS Grid Layout<\/a><\/li>\n  <li><a href=\"https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/\" rel=\"dofollow noopener\" target=\"_blank\">Guide Complet de CSS Grid sur CSS-Tricks<\/a><\/li>\n  <li><a href=\"https:\/\/www.youtube.com\/playlist?list=PL4-IK0AVhVjMsCXOMfr6930MsPbrGXWPI\" rel=\"dofollow noopener\" target=\"_blank\">Tutoriels Vid\u00e9os sur YouTube<\/a><\/li>\n<\/ul><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>zones de grille nomm\u00e9es en CSS<\/strong> offrent une m\u00e9thode puissante et intuitive pour organiser vos mises en page de mani\u00e8re flexible et responsive. En les utilisant, vous pouvez cr\u00e9er des designs plus propres et maintenables. Explorez davantage ces techniques pour ma\u00eetriser l&rsquo;art de la mise en page CSS et cr\u00e9ez des sites web qui se distinguent. Pour des tutoriels CSS plus avanc\u00e9s, consultez notre article sur les <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/css-layouts\/200\" target=\"_blank\" rel=\"noopener\">dispositions CSS avanc\u00e9es<\/a>. Pour commencer \u00e0 utiliser Flexbox avec CSS, lisez notre <a href=\"https:\/\/wikiform.fr\/codespace\/guide-complet-flexbox\" target=\"_blank\" rel=\"noopener\">guide complet sur Flexbox<\/a>. N\u2019h\u00e9sitez pas \u00e0 consulter nos autres articles d\u00e9taill\u00e9s sur des sujets comme <a href=\"https:\/\/wikiform.fr\/codespace\/fonctionnement-navigateur-web-html-guide\" target=\"_blank\" rel=\"noopener\">le fonctionnement des navigateurs web<\/a>, <a href=\"https:\/\/wikiform.fr\/codespace\/base-langage-html-apprendre-fondamentaux\" target=\"_blank\" rel=\"noopener\">les bases du langage HTML<\/a>, et <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\" target=\"_blank\" rel=\"noopener\">comment cr\u00e9er votre premi\u00e8re page HTML<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-HTML-ET-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Formation HTML et CSS par Learnify\" title=\"\"><\/a>\n\n\n\n<h3 class=\"wp-block-heading\">Explorer plus avec CSS et HTML<\/h3>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Utilisation des Zones de Grille Nomm\u00e9es en CSS constitue une astuce essentielle pour optimiser l\u2019organisation et le design de vos mises en page responsives. Comprendre&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2793,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5449","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\/5449","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=5449"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5449\/revisions"}],"predecessor-version":[{"id":6076,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5449\/revisions\/6076"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2793"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5449"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5449"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5449"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}