{"id":5445,"date":"2024-08-27T19:40:52","date_gmt":"2024-08-27T19:40:52","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/alignement-grille-css-guide\/"},"modified":"2024-12-05T15:31:31","modified_gmt":"2024-12-05T15:31:31","slug":"alignement-grille-css-guide","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/alignement-grille-css-guide\/","title":{"rendered":"10.7 Alignement dans Grille en CSS : Guide Pratique"},"content":{"rendered":"\n\n\n<p><strong>Alignement dans Grille en CSS<\/strong> est une comp\u00e9tence essentielle pour tout d\u00e9veloppeur front-end. Ma\u00eetriser l&rsquo;art d&rsquo;aligner les \u00e9l\u00e9ments \u00e0 l&rsquo;int\u00e9rieur d&rsquo;une grille permet de cr\u00e9er des mises en page flexibles et esth\u00e9tiquement plaisantes. Dans ce tutoriel, nous d\u00e9couvrirons les diff\u00e9rentes techniques et propri\u00e9t\u00e9s CSS pour l&rsquo;alignement dans Grid Layout. Pr\u00e9parez-vous \u00e0 transformer vos interfaces utilisateur gr\u00e2ce \u00e0 ces techniques avanc\u00e9es de CSS Grid.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 l&rsquo;<strong>Alignement dans Grille 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:\/\/www.youtube.com\/embed\/Iithty9osLo\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"youtubePlayer\"><\/iframe>\n<\/div>\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\/586675172?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) {\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();\n    }\n});\n<\/script>\n\n\n\n<p>Le mod\u00e8le de <a href=\"https:\/\/wikiform.fr\/codespace\/alignement-grille-css-guide\" target=\"_blank\" rel=\"noopener\">grille CSS<\/a> permet de concevoir facilement des mises en page complexes en deux dimensions. Il comprend des propri\u00e9t\u00e9s sp\u00e9cifiques pour aligner les \u00e9l\u00e9ments de la grille \u00e0 la fois sur l&rsquo;axe horizontal et vertical. Gr\u00e2ce \u00e0 ces propri\u00e9t\u00e9s, vous pouvez disposer les \u00e9l\u00e9ments exactement l\u00e0 o\u00f9 vous le souhaitez. Dans cet article, nous explorerons les diverses propri\u00e9t\u00e9s d&rsquo;alignement disponibles.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Alignement des \u00c9l\u00e9ments Enfants<\/h3>\n\n\n\n<p>Pour aligner les \u00e9l\u00e9ments \u00e0 l&rsquo;int\u00e9rieur de la grille, on utilise principalement trois propri\u00e9t\u00e9s de Grid Layout : <code>justify-items<\/code>, <code>align-items<\/code>, et <code>place-items<\/code>. Ces propri\u00e9t\u00e9s permettent de contr\u00f4ler comment les \u00e9l\u00e9ments enfants sont align\u00e9s \u00e0 l&rsquo;int\u00e9rieur des conteneurs de grille. Pour le comprendre en profondeur, consultez cet <a href=\"https:\/\/wikiform.fr\/codespace\/element-html-head-tout-savoir\" target=\"_blank\" rel=\"noopener\">article sur les \u00e9l\u00e9ments HTML<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Utiliser <code>justify-items<\/code><\/h4>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>justify-items<\/code> est utilis\u00e9e pour aligner les \u00e9l\u00e9ments sur l&rsquo;axe horizontal (l&rsquo;axe en ligne). Voici un exemple de son utilisation :<\/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; \/* start, end, center, stretch *\/\n}\n\n.grid-item {\n  background-color: #DDDDDD;\n  padding: 20px;\n  border: 1px solid #888888;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Utiliser <code>align-items<\/code><\/h4>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>align-items<\/code> sert \u00e0 aligner les \u00e9l\u00e9ments sur l&rsquo;axe vertical (l&rsquo;axe du bloc). Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.grid-container {\n  display: grid;\n  grid-template-rows: 100px 100px 100px;\n  align-items: start; \/* start, end, center, stretch *\/\n}\n\n.grid-item {\n  background-color: #DDDDDD;\n  padding: 20px;\n  border: 1px solid #888888;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Alignement des \u00c9l\u00e9ments Conteneurs<\/h3>\n\n\n\n<p>Tout comme pour les \u00e9l\u00e9ments enfants, il est \u00e9galement possible d&rsquo;aligner les \u00e9l\u00e9ments conteneurs en utilisant les propri\u00e9t\u00e9s <code>justify-content<\/code>, <code>align-content<\/code>, et <code>place-content<\/code>. Ces propri\u00e9t\u00e9s affectent la disposition de l&rsquo;ensemble de la grille. Apprenez comment utiliser ces propri\u00e9t\u00e9s dans <a href=\"https:\/\/wikiform.fr\/codespace\/disposition-contenu-grid-css-layout\" target=\"_blank\" rel=\"noopener\">ce guide complet sur la disposition du contenu en CSS Grid<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Utiliser <code>justify-content<\/code><\/h4>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>justify-content<\/code> contr\u00f4le l&rsquo;alignement des lignes de grille sur l&rsquo;axe horizontal. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.grid-container {\n  display: grid;\n  grid-template-columns: repeat(3, 200px);\n  justify-content: space-between; \/* start, end, center, space-between, space-around, space-evenly *\/\n}\n\n.grid-item {\n  background-color: #DDDDDD;\n  padding: 20px;\n  border: 1px solid #888888;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Utiliser <code>align-content<\/code><\/h4>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>align-content<\/code> r\u00e8gle l&rsquo;alignement des lignes de grille sur l&rsquo;axe vertical. Voici comment l&rsquo;utiliser :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.grid-container {\n  display: grid;\n  grid-template-rows: repeat(3, 100px);\n  align-content: center; \/* start, end, center, space-between, space-around, space-evenly *\/\n}\n\n.grid-item {\n  background-color: #DDDDDD;\n  padding: 20px;\n  border: 1px solid #888888;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Placement d&rsquo;Items Individualis\u00e9s<\/h3>\n\n\n\n<p>Parfois, vous aurez besoin d&rsquo;aligner un \u00e9l\u00e9ment sp\u00e9cifique diff\u00e9remment des autres. Pour cela, on utilise les propri\u00e9t\u00e9s <code>justify-self<\/code> et <code>align-self<\/code> sur un \u00e9l\u00e9ment particulier. Pour aller plus loin, d\u00e9couvrez comment utiliser les <a href=\"https:\/\/wikiform.fr\/codespace\/attributs-class-id-selecteurs-css\" target=\"_blank\" rel=\"noopener\">attributs de classe et d&rsquo;identifiant<\/a> pour affiner votre alignement des \u00e9l\u00e9ments.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Utiliser <code>justify-self<\/code><\/h4>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>justify-self<\/code> permet d&rsquo;aligner un seul \u00e9l\u00e9ment sur l&rsquo;axe horizontal. Exemple :<\/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}\n\n.grid-item {\n  background-color: #DDDDDD;\n  padding: 20px;\n  border: 1px solid #888888;\n}\n\n.grid-item:first-child {\n  justify-self: center; \/* start, end, center, stretch *\/\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Utiliser <code>align-self<\/code><\/h4>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>align-self<\/code> permet d&rsquo;aligner un seul \u00e9l\u00e9ment sur l&rsquo;axe vertical. Exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.grid-container {\n  display: grid;\n  grid-template-rows: 100px 100px 100px;\n}\n\n.grid-item {\n  background-color: #DDDDDD;\n  padding: 20px;\n  border: 1px solid #888888;\n}\n\n.grid-item:first-child {\n  align-self: end; \/* start, end, center, stretch *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation Combin\u00e9e des Propri\u00e9t\u00e9s<\/h3>\n\n\n\n<p>Les propri\u00e9t\u00e9s d&rsquo;alignement peuvent \u00eatre combin\u00e9es pour obtenir des mises en page complexes mais harmonieuses. Voici un exemple pratique combinant plusieurs propri\u00e9t\u00e9s d&rsquo;alignement :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.grid-container {\n  display: grid;\n  grid-template-columns: 100px 1fr 100px;\n  grid-template-rows: 50px 1fr 50px;\n  justify-items: center;\n  align-items: center;\n}\n\n.header {\n  grid-column: 1 \/ -1;\n  justify-self: stretch;\n}\n\n.sidebar {\n  grid-row: 2;\n  align-self: stretch;\n}\n\n.content {\n  grid-row: 2;\n  justify-self: stretch;\n}\n\n.footer {\n  grid-column: 1 \/ -1;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Alignement Dynamique avec <code>place-items<\/code> et <code>place-content<\/code><\/h3>\n\n\n\n<p>Les propri\u00e9t\u00e9s <code>place-items<\/code> et <code>place-content<\/code> sont des raccourcis pour <code>justify-items<\/code> et <code>align-items<\/code>, et <code>justify-content<\/code> et <code>align-content<\/code>, respectivement. Elles permettent de d\u00e9finir l&rsquo;alignement des \u00e9l\u00e9ments en une seule ligne :<\/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  place-items: center stretch; \/* align-items \/ justify-items *\/\n}\n\n.grid-container-content {\n  display: grid;\n  grid-template-rows: repeat(3, 100px);\n  place-content: space-between center; \/* align-content \/ justify-content *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Faire Appr\u00e9cier la Lecture avec des Design Efficaces<\/h3>\n\n\n\n<p>Un bon design ne sert pas seulement \u00e0 rendre une page web esth\u00e9tique, il am\u00e9liore \u00e9galement la lisibilit\u00e9 et l&rsquo;exp\u00e9rience utilisateur. En ma\u00eetrisant l&rsquo;alignement dans la grille CSS, vous pouvez organiser le contenu de mani\u00e8re coh\u00e9rente et agr\u00e9able, rendant la lecture plus fluide et agr\u00e9able pour les utilisateurs. Amusez-vous \u00e0 essayer ces techniques sur vos propres projets et observez comment elles transforment l&rsquo;apparence de vos pages web. Pour plus de techniques en mati\u00e8re de design web, explorez notre <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\" target=\"_blank\" rel=\"noopener\">guide pour cr\u00e9er votre premi\u00e8re page HTML<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les techniques d&rsquo;<strong>Alignement dans Grille en CSS<\/strong> sont essentielles pour tout d\u00e9veloppeur cherchant\n","protected":false},"excerpt":{"rendered":"<p>Alignement dans Grille en CSS est une comp\u00e9tence essentielle pour tout d\u00e9veloppeur front-end. Ma\u00eetriser l&rsquo;art d&rsquo;aligner les \u00e9l\u00e9ments \u00e0 l&rsquo;int\u00e9rieur d&rsquo;une grille permet de cr\u00e9er&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2699,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5445","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\/5445","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=5445"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5445\/revisions"}],"predecessor-version":[{"id":6074,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5445\/revisions\/6074"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2699"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5445"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5445"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5445"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}