{"id":5441,"date":"2024-08-27T19:33:02","date_gmt":"2024-08-27T19:33:02","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/alignement-horizontal-vertical-items-grid\/"},"modified":"2024-12-03T17:51:18","modified_gmt":"2024-12-03T17:51:18","slug":"alignement-horizontal-vertical-items-grid","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/alignement-horizontal-vertical-items-grid\/","title":{"rendered":"10.5 Alignement Horizontal et Vertical des Items-grid CSS"},"content":{"rendered":"\n<p><strong>Alignement Horizontal et Vertical des Items-grid CSS<\/strong> est un concept fondamental pour d\u00e9velopper des interfaces web modernes et responsives. En ma\u00eetrisant l&rsquo;alignement des items dans une grille CSS, vous pouvez cr\u00e9er des mises en page \u00e9l\u00e9gantes et intuitives. D\u00e9couvrons ensemble comment aligner horizontalement et verticalement les \u00e9l\u00e9ments d&rsquo;une grille CSS avec des exemples concrets. Pour bien d\u00e9buter, nous vous recommandons de consulter notre <a href=\"https:\/\/wikiform.fr\/codespace\/fonctionnement-navigateur-web-html-guide\" target=\"_blank\" rel=\"noopener\">guide sur le fonctionnement des navigateurs web<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 l&rsquo;Alignement des Items en CSS Grid<\/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\/586675021?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>CSS Grid est un puissant module CSS permettant la cr\u00e9ation de mises en page complexes sur le web. Gr\u00e2ce \u00e0 ses diff\u00e9rentes propri\u00e9t\u00e9s, vous pouvez facilement contr\u00f4ler l&rsquo;alignement et l&rsquo;\u00e9tendue des \u00e9l\u00e9ments sur la grille horizontale et verticale, offrant ainsi une flexibilit\u00e9 in\u00e9gal\u00e9e par d&rsquo;autres techniques de mise en page. Explorez \u00e9galement nos <a href=\"https:\/\/wikiform.fr\/codespace\/nouveaux-elements-html5-guide\" target=\"_blank\" rel=\"noopener\">nouvelles fonctionnalit\u00e9s et \u00e9l\u00e9ments HTML5<\/a> pour compl\u00e9ter vos connaissances.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Alignement Horizontal des Items<\/h3>\n\n\n\n<p>Pour aligner horizontalement les items dans une grille CSS, vous pouvez utiliser les propri\u00e9t\u00e9s <code>justify-items<\/code> ou <code>justify-content<\/code>. La propri\u00e9t\u00e9 <code>justify-items<\/code> aligne les items individuellement dans leur cellule de grille, tandis que <code>justify-content<\/code> aligne l&rsquo;ensemble des items de la grille dans leur conteneur.<\/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  justify-items: center; \/* center | start | end | stretch *\/\n  justify-content: center; \/* center | start | end | space-between | space-around | space-evenly *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Alignement Vertical des Items<\/h3>\n\n\n\n<p>L&rsquo;alignement vertical dans une <a href=\"https:\/\/wikiform.fr\/codespace\/alignement-horizontal-vertical-items-grid\" target=\"_blank\" rel=\"noopener\">grille CSS<\/a> est tout aussi important. Vous pouvez utiliser les propri\u00e9t\u00e9s <code>align-items<\/code> ou <code>align-content<\/code> pour ce faire. La propri\u00e9t\u00e9 <code>align-items<\/code> aligne les items individuellement dans leur cellule verticale, tandis que <code>align-content<\/code> aligne l&rsquo;ensemble des items de la grille verticalement dans leur conteneur.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.grid-container {\n  display: grid;\n  grid-template-rows: repeat(3, 1fr);\n  align-items: center; \/* center | start | end | stretch *\/\n  align-content: center; \/* center | start | end | space-between | space-around | space-evenly *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Alignement des Items dans les Grilles de CSS Flexbox<\/h3>\n\n\n\n<p>Bien que CSS Grid soit extr\u00eamement puissant, CSS Flexbox offre \u00e9galement des m\u00e9thodes pour l&rsquo;alignement horizontal et vertical. Voici comment aligner les items dans une bo\u00eete flexible avec Flexbox :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.flex-container {\n  display: flex;\n  justify-content: center; \/* center | start | end | space-between | space-around | space-evenly *\/\n  align-items: center; \/* center | start | end | stretch *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Concrets<\/h3>\n\n\n\n<p>Pour illustrer les concepts d&rsquo;alignement horizontal et vertical des items, consid\u00e9rons un exemple pratique utilisant CSS Grid :<\/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\"&gt;2&lt;\/div&gt;\n  &lt;div class=\"grid-item\"&gt;3&lt;\/div&gt;\n  &lt;div class=\"grid-item\"&gt;4&lt;\/div&gt;\n  &lt;div class=\"grid-item\"&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  justify-items: center; \/* \u00c9l\u00e9ments centr\u00e9s horizontalement *\/\n  align-items: center; \/* \u00c9l\u00e9ments centr\u00e9s verticalement *\/\n  height: 100vh; \/* Pour d\u00e9montrer l'alignement vertical *\/\n}\n\n.grid-item {\n  background-color: lightblue;\n  padding: 20px;\n  border: 1px solid #ccc;\n  text-align: center;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation de <code>justify-self<\/code> et <code>align-self<\/code> pour l&rsquo;Alignement Individuel<\/h3>\n\n\n\n<p>CSS offre \u00e9galement la possibilit\u00e9 d&rsquo;aligner individuellement les items de la grille gr\u00e2ce aux propri\u00e9t\u00e9s <code>justify-self<\/code> et <code>align-self<\/code>. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.grid-item-1 {\n  justify-self: start; \/* Alignement \u00e0 gauche de la cellule *\/\n  align-self: end; \/* Alignement en bas de la cellule *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Mise en Pratique Avanc\u00e9e<\/h3>\n\n\n\n<p>Pour acqu\u00e9rir une compr\u00e9hension plus approfondie et pratique de l&rsquo;alignement des items en CSS Grid, essayons un projet complexe o\u00f9 nous utiliserons ces concepts pour cr\u00e9er une mise en page de galerie d&rsquo;images :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div class=\"gallery-container\"&gt;\n  &lt;div class=\"gallery-item large\"&gt;A&lt;\/div&gt;\n  &lt;div class=\"gallery-item\"&gt;B&lt;\/div&gt;\n  &lt;div class=\"gallery-item\"&gt;C&lt;\/div&gt;\n  &lt;div class=\"gallery-item wide\"&gt;D&lt;\/div&gt;\n  &lt;div class=\"gallery-item\"&gt;E&lt;\/div&gt;\n  &lt;div class=\"gallery-item\"&gt;F&lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.gallery-container {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 10px;\n  justify-items: center;\n  align-items: center;\n}\n\n.gallery-item {\n  background-color: #f0f0f0;\n  padding: 20px;\n  text-align: center;\n  font-size: 1.5em;\n}\n\n.gallery-item.large {\n  grid-column: span 2;\n}\n\n.gallery-item.wide {\n  grid-column: span 3;\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>L&rsquo;alignement horizontal et vertical des items dans une grille CSS est essentiel pour cr\u00e9er des mises en page web bien structur\u00e9es et attrayantes. En ma\u00eetrisant les propri\u00e9t\u00e9s <code>justify-items<\/code>, <code>justify-content<\/code>, <code>align-items<\/code> et <code>align-content<\/code>, ainsi que <code>justify-self<\/code> et <code>align-self<\/code>, vous pouvez positionner vos \u00e9l\u00e9ments de mani\u00e8re pr\u00e9cise selon vos besoins. Continuez \u00e0 exp\u00e9rimenter et \u00e0 explorer les capacit\u00e9s de CSS Grid pour perfectionner vos comp\u00e9tences en d\u00e9veloppement d&rsquo;interfaces modernes. Pour aller plus loin, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/rediger-css-pages-html-guide\" target=\"_blank\" rel=\"noopener\">guide sur la r\u00e9daction de CSS dans les pages HTML<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/css-grid-layouts-expert\/151\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-CSS-grid-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation CSS Grid Offre 50%\" title=\"\"><\/a>\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=\"Learnify Formation HTML et CSS Offre 50%\" title=\"\"><\/a>\n\n\n<!-- Liens additionnels internes -->\n<ul>\n  <li><a href=\"https:\/\/wikiform.fr\/codespace\/element-html-head-tout-savoir\" target=\"_blank\" rel=\"noopener\">Tout savoir sur l&rsquo;\u00e9l\u00e9ment HTML head<\/a><\/li>\n  <li><a href=\"https:\/\/wikiform.fr\/codespace\/bases-langage-html-apprendre-fondamentaux\" target=\"_blank\" rel=\"noopener\">Bases du langage HTML<\/a><\/li>\n  <li><a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\" target=\"_blank\" rel=\"noopener\">Cr\u00e9er sa premi\u00e8re page HTML<\/a><\/li>\n  <li><a href=\"https:\/\/wikiform.fr\/codespace\/gestion-police-css-utiliser-font-family\" target=\"_blank\" rel=\"noopener\">Utiliser font-family en CSS<\/a><\/li>\n  <li><a href=\"https:\/\/wikiform.fr\/codespace\/proprietes-css-texte-tout-comprendre\" target=\"_blank\" rel=\"noopener\">Comprendre les propri\u00e9t\u00e9s CSS pour le texte<\/a><\/li>\n<\/ul>\n\n<!-- Ressources externes (liens dofollow) -->\n<p>Pour plus d&rsquo;informations sur les meilleures pratiques en CSS Grid, vous pouvez consulter les ressources suivantes :<\/p>\n<ul>\n  <li><a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/CSS_Grid_Layout\" target=\"_blank\" rel=\"noopener\">Documentation MDN sur CSS Grid Layout<\/a><\/li>\n  <li><a href=\"https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/\" target=\"_blank\" rel=\"noopener\">Guide complet de CSS Tricks sur CSS Grid<\/a><\/li>\n  <li><a href=\"https:\/\/www.smashingmagazine.com\/2020\/03\/understanding-css-grid-container\/\" target=\"_blank\" rel=\"noopener\">Comprendre le conteneur CSS Grid par Smashing Magazine<\/a><\/li>\n  <li><a href=\"https:\/\/web.dev\/learn\/css\/grid\/\" target=\"_blank\" rel=\"noopener\">Tutoriel CSS Grid par Web.dev<\/a><\/li>\n  <li><a href=\"https:\/\/c","protected":false},"excerpt":{"rendered":"<p>Alignement Horizontal et Vertical des Items-grid CSS est un concept fondamental pour d\u00e9velopper des interfaces web modernes et responsives. En ma\u00eetrisant l&rsquo;alignement des items dans&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2700,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5441","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\/5441","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=5441"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5441\/revisions"}],"predecessor-version":[{"id":5442,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5441\/revisions\/5442"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2700"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5441"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5441"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5441"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}