{"id":5443,"date":"2024-08-27T19:36:43","date_gmt":"2024-08-27T19:36:43","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/alignement-item-grid-css-tutoriel\/"},"modified":"2024-12-05T15:22:08","modified_gmt":"2024-12-05T15:22:08","slug":"alignement-item-grid-css-tutoriel","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/alignement-item-grid-css-tutoriel\/","title":{"rendered":"10.6 Alignement d&rsquo;un Item-grid en CSS : Tutoriel"},"content":{"rendered":"\n\n\n<p><strong>Les Grilles CSS (Item-grid)<\/strong> permettent de cr\u00e9er des mises en page flexibles et r\u00e9actives pour les applications web. Comprendre comment aligner correctement les \u00e9l\u00e9ments d&rsquo;une grille (item-grid) peut am\u00e9liorer la conception globale et l&rsquo;exp\u00e9rience utilisateur de votre site. Apprenons comment les utiliser et les impl\u00e9menter gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 <strong>l&rsquo;Alignement d&rsquo;un Item-grid 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\/586675083?dnt=1&amp;fullscreen=0&amp;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 grilles CSS (ou CSS Grid Layout) sont des techniques de mise en page CSS qui permettent de cr\u00e9er des mises en page complexes en deux dimensions. Un des aspects cruciaux dans l&rsquo;utilisation des grilles CSS est l&rsquo;alignement des items de la grille pour garantir que l&rsquo;interface utilisateur est bien pr\u00e9sent\u00e9e et coh\u00e9rente. Nous allons voir comment aligner les items d&rsquo;une grille CSS de mani\u00e8re efficace.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Initialiser une Grille CSS<\/h3>\n\n\n\n<p>Pour commencer, nous devons initialiser une grille CSS. Nous allons utiliser des propri\u00e9t\u00e9s CSS telles que <code>display: grid;<\/code> et <code>grid-template-columns;<\/code> pour d\u00e9finir notre grille. Voici un exemple de base :<\/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  gap: 10px;\n}\n\n.grid-item {\n  background-color: #ddd;\n  padding: 20px;\n  text-align: center;\n}\n<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, nous avons cr\u00e9\u00e9 une grille de conteneur avec 3 colonnes de largeurs \u00e9gales et un espacement de 10 pixels entre les items. Regardons maintenant comment aligner ces items de mani\u00e8re plus pr\u00e9cise.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Alignement des Items dans la Grille<\/h3>\n\n\n\n<p>Pour aligner les items dans la grille, nous pouvons utiliser plusieurs propri\u00e9t\u00e9s CSS comme <code>justify-items<\/code>, <code>align-items<\/code>, <code>justify-content<\/code>, et <code>align-content<\/code>. Examinons chaque propri\u00e9t\u00e9 :<\/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  gap: 10px;\n  \n  \/* Alignement horizontal des items *\/\n  justify-items: center;\n\n  \/* Alignement vertical des items *\/\n  align-items: center;\n}\n<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, nous avons centr\u00e9 les items de la grille \u00e0 la fois horizontalement (avec <code>justify-items<\/code>) et verticalement (avec <code>align-items<\/code>). Voici un aper\u00e7u rapide de ce que font ces propri\u00e9t\u00e9s :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>justify-items:<\/strong> Contr\u00f4le l&rsquo;alignement horizontal des items \u00e0 l&rsquo;int\u00e9rieur de la grille.<\/li>\n\n\n\n<li><strong>align-items:<\/strong> Contr\u00f4le l&rsquo;alignement vertical des items \u00e0 l&rsquo;int\u00e9rieur de la grille.<\/li>\n<\/ul>\n\n\n\n<p>En plus d&rsquo;aligner les items individuellement, nous pouvons aussi aligner la grille enti\u00e8re au sein de son conteneur parent avec <code>justify-content<\/code> et <code>align-content<\/code> :<\/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  gap: 10px;\n\n  \/* Alignement horizontal de la grille *\/\n  justify-content: center;\n\n  \/* Alignement vertical de la grille *\/\n  align-content: center;\n}\n<\/code><\/pre>\n\n\n\n<p>Avec <code>justify-content<\/code> et <code>align-content<\/code>, vous pouvez centrer l&rsquo;ensemble de la grille au sein de son conteneur parent horizontalement et verticalement, respectivement.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Alignement de Colonnes et de Lignes Sp\u00e9cifiques<\/h3>\n\n\n\n<p>Parfois, vous voudrez peut-\u00eatre aligner des items sp\u00e9cifiques au sein de la grille. Vous pouvez utiliser les propri\u00e9t\u00e9s <code>justify-self<\/code> et <code>align-self<\/code> pour aligner des items individuels :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.grid-item {\n  background-color: #ddd;\n  padding: 20px;\n  text-align: center;\n\n  \/* Alignement horizontal sp\u00e9cifique *\/\n  justify-self: end;\n\n  \/* Alignement vertical sp\u00e9cifique *\/\n  align-self: start;\n}\n<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, nous avons align\u00e9 un item sp\u00e9cifique \u00e0 la fin (right) horizontalement et au d\u00e9but (top) verticalement.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Exemple Complet d&rsquo;Alignement Multiple<\/h3>\n\n\n\n<p>Regroupons tout ce que nous avons appris dans un exemple complet :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div class=\"grid-container\"&gt;\n  &lt;div class=\"grid-item\"&gt;1&lt;\/div&gt;\n  &lt;div class=\"grid-item\" style=\"justify-self: center;\"&gt;2&lt;\/div&gt;\n  &lt;div class=\"grid-item\" style=\"align-self: end;\"&gt;3&lt;\/div&gt;\n  &lt;div class=\"grid-item\"&gt;4&lt;\/div&gt;\n  &lt;div class=\"grid-item\" style=\"justify-self: start; align-self: start;\"&gt;5&lt;\/div&gt;\n  &lt;div class=\"grid-item\"&gt;6&lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\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  gap: 10px;\n\n  \/* Alignement par d\u00e9faut des items *\/\n  justify-items: center;\n  align-items: center;\n\n  \/* Alignement de la grille dans son conteneur *\/\n  justify-content: center;\n  align-content: center;\n}\n\n.grid-item {\n  background-color: #ddd;\n  padding: 20px;\n  text-align: center;\n}\n<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, nous avons une grille de 3 colonnes avec des items align\u00e9s de diverses mani\u00e8res, montrant comment les propri\u00e9t\u00e9s d&rsquo;alignement peuvent \u00eatre combin\u00e9es pour obtenir des mises en page plus complexes et sp\u00e9cifiques.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ressources Suppl\u00e9mentaires<\/h3>\n\n\n\n<p>Pour un aper\u00e7u plus d\u00e9taill\u00e9 et des cas d&rsquo;utilisation avanc\u00e9s des grilles CSS, voici quelques ressources suppl\u00e9mentaires :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Grid_Layout\" target=\"_blank\" rel=\"noopener\">MDN Web Docs sur CSS Grid Layout<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/\" target=\"_blank\" rel=\"noopener\">Guide Complet des Grilles CSS de CSS-Tricks<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.freecodecamp.org\/news\/learn-css-grid-the-easy-way\/\" target=\"_blank\" rel=\"noopener\">Apprenez le Grid CSS par FreeCodeCamp<\/a><\/li>\n<\/ul>\n\n\n\n<p><p>Pensez \u00e9galement \u00e0 consulter notre guide sur le <a href=\"https:\/\/wikiform.fr\/codespace\/fonctionnement-navigateur-web-html-guide\">fonctionnement du navigateur web<\/a> pour bien comprendre comment les \u00e9l\u00e9ments HTML et CSS interagissent lors du rendu. De plus, vous pouvez en apprendre davantage sur <a href=\"https:\/\/wikiform.fr\/codespace\/bases-langage-html-apprendre-fondamentaux\">les bases du langage HTML<\/a> et sur la <a href=\"https:\/\/wikiform.fr\/codespace\/element-html-head-tout-savoir\">section head en HTML<\/a>.<\/p><br><br><br><br><br><br><br><br><br><br><br><br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Les Grilles CSS (Item-grid) permettent de cr\u00e9er des mises en page flexibles et r\u00e9actives pour les applications web. Comprendre comment aligner correctement les \u00e9l\u00e9ments d&rsquo;une&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2701,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5443","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\/5443","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=5443"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5443\/revisions"}],"predecessor-version":[{"id":6072,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5443\/revisions\/6072"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2701"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5443"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5443"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5443"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}