{"id":5451,"date":"2024-08-27T19:53:04","date_gmt":"2024-08-27T19:53:04","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/placement-automatique-css-tutoriel\/"},"modified":"2024-08-27T19:53:08","modified_gmt":"2024-08-27T19:53:08","slug":"placement-automatique-css-tutoriel","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/placement-automatique-css-tutoriel\/","title":{"rendered":"10.10 Placement Automatique en CSS : Tutoriel"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Placement Automatique en CSS<\/strong> est une technique cruciale pour la cr\u00e9ation de mises en page web r\u00e9actives et dynamiques. Comprendre comment mettre en \u0153uvre et utiliser les propri\u00e9t\u00e9s de placement automatique peut transformer vos conceptions CSS en interfaces utilisateur fluides et facilement adaptables. Apprenons comment cela fonctionne et comment les impl\u00e9menter gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction au <strong>Placement Automatique 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\/tgbNymZ7vqY\" 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<script src=\"https:\/\/www.youtube.com\/iframe_api\"><\/script>\n<script>\n  var player;\n  function onYouTubeIframeAPIReady() {\n    player = new YT.Player('youtubePlayer', {\n      events: {\n        'onReady': onPlayerReady,\n        'onStateChange': onPlayerStateChange\n      }\n    });\n  }\n\n  var isPopupDisplayed = false;\n\n  function onPlayerReady(event) {\n    \/\/ Player ready\n  }\n\n  function onPlayerStateChange(event) {\n    if (event.data == YT.PlayerState.PLAYING && !isPopupDisplayed) {\n      setTimeout(function() {\n        if (!isPopupDisplayed) {\n          player.pauseVideo();\n          alert('Obtenez notre guide CSS expert \u00e0 50% de r\u00e9duction maintenant!');\n          isPopupDisplayed = true;\n        }\n      }, 120000); \/\/ 120 seconds = 2 minutes\n    }\n  }\n<\/script>\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\/586675419?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>Le placement automatique en CSS est une fonctionnalit\u00e9 offerte par la grille CSS (CSS Grid) qui permet de placer des \u00e9l\u00e9ments dans une mise en page sans avoir \u00e0 sp\u00e9cifier leurs positions exactes. Les \u00e9l\u00e9ments sont automatiquement positionn\u00e9s dans les cellules disponibles de la grille en fonction des propri\u00e9t\u00e9s d\u00e9finies. Cela permet une disposition flexible et r\u00e9active des \u00e9l\u00e9ments.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9finir une Grille de Base<\/h3>\n\n\n\n<p>Pour d\u00e9marrer avec le placement automatique en CSS, commen\u00e7ons par cr\u00e9er une grille de base. Nous allons d\u00e9finir un conteneur avec une grille de 3 colonnes et 2 lignes :<\/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, 100px);\n  gap: 10px;\n}\n.grid-item {\n  background-color: lightblue;\n  padding: 20px;\n  text-align: center;\n  font-size: 20px;\n}\n<\/code><\/pre>\n\n\n\n<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>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser auto-fill et auto-fit<\/h3>\n\n\n\n<p><code>auto-fill<\/code> et <code>auto-fit<\/code> sont des valeurs de la propri\u00e9t\u00e9 <code>grid-template-columns<\/code> utilis\u00e9es pour g\u00e9rer la disposition r\u00e9active des \u00e9l\u00e9ments. Voyons comment elles fonctionnent :<\/p>\n\n\n\n<ul>\n  <li><strong>auto-fill<\/strong> : Remplit la grille avec des colonnes jusqu&rsquo;\u00e0 ce que l&rsquo;espace soit \u00e9puis\u00e9. Les colonnes vides sont toujours pr\u00e9sentes, ce qui peut cr\u00e9er des espaces blancs.<\/li>\n  <li><strong>auto-fit<\/strong> : Remplit \u00e9galement la grille de colonnes, mais celles-ci s&rsquo;adaptent pour combler les espaces, serrant les colonnes ensemble si n\u00e9cessaire.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.grid-container {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));\n  gap: 10px;\n}\n<\/code><\/pre>\n\n\n\n<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>\n\n\n\n<h3 class=\"wp-block-heading\">Placement d&rsquo;\u00c9l\u00e9ments Automatiquement<\/h3>\n\n\n\n<p>Le placement automatique permet de placer des \u00e9l\u00e9ments dans la <a href=\"https:\/\/wikiform.fr\/codespace\/emplacement-grille-css-techniques\" target=\"_blank\" rel=\"noopener\">premi\u00e8re cellule disponible<\/a> de la grille. Vous n&rsquo;avez pas besoin de sp\u00e9cifier explicitement la colonne ou la ligne pour chaque \u00e9l\u00e9ment. La grille se charge de tout :<\/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<h3 class=\"wp-block-heading\">R\u00e9ordering des \u00c9l\u00e9ments avec Grid Auto Placement<\/h3>\n\n\n\n<p>Vous pouvez \u00e9galement utiliser les propri\u00e9t\u00e9s de <a href=\"https:\/\/wikiform.fr\/codespace\/disposition-contenu-grid-css-layout\" target=\"_blank\" rel=\"noopener\">grille<\/a> pour r\u00e9ordonner les \u00e9l\u00e9ments sans changer leur ordre dans le code HTML. Par exemple, en utilisant la propri\u00e9t\u00e9 <code>order<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.grid-item:nth-child(1) {\n  order: 3;\n}\n.grid-item:nth-child(2) {\n  order: 1;\n}\n.grid-item:nth-child(3) {\n  order: 2;\n}\n<\/code><\/pre>\n\n\n\n<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>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser le Grid-Template-Areas pour le Placement Automatique<\/h3>\n\n\n\n<p>Le <a href=\"https:\/\/wikiform.fr\/codespace\/grid-template-areas-css-utilisation\">placement automatique<\/a> peut \u00eatre combin\u00e9 avec <code>grid-template-areas<\/code> pour cr\u00e9er des dispositions complexes. Voici un exemple de disposition personnalis\u00e9e :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.grid-container {\n  display: grid;\n  grid-template-areas: \n    'header header header'\n    'sidebar content content';\n  grid-template-columns: 1fr 3fr;\n  grid-template-rows: auto;\n  gap: 10px;\n}\n\n.header {\n  grid-area: header;\n  background-color: #f1f1f1;\n}\n\n.sidebar {\n  grid-area: sidebar;\n  background-color: #f1f1f1;\n}\n\n.content {\n  grid-area: content;\n  background-color: #f1f1f1;\n}\n<\/code><\/pre>\n\n\n\n<div class=\"grid-container\">\n  <div class=\"header\">Header<\/div>\n  <div class=\"sidebar\">Sidebar<\/div>\n  <div class=\"content\">Content<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Le <strong>Placement Automatique en CSS<\/strong> simplifie grandement la cr\u00e9ation de mises en page r\u00e9actives et dynamiques. En utilisant les propri\u00e9t\u00e9s de grille, vous pouvez automatiquement positionner et r\u00e9ordonner les \u00e9l\u00e9ments afin de r\u00e9pondre aux exigences de mise en page. Pour plus d&rsquo;informations sur les grilles CSS, consultez \u00e9galement nos guides sur <a href=\"https:\/\/wikiform.fr\/codespace\/creation-grille-css-guide-pratique\" target=\"_blank\" rel=\"noopener\">cr\u00e9ation de grille CSS<\/a>, <a href=\"https:\/\/wikiform.fr\/codespace\/taille-colonnes-lignes-implicites-css\" target=\"_blank\" rel=\"noopener\">taille des colonnes et lignes implicites<\/a>, <a href=\"https:\/\/wikiform.fr\/codespace\/espacements-lignes-colonnes-css-guide\" target=\"_blank\" rel=\"noopener\">espacements des lignes et colonnes<\/a>, <a href=\"https:\/\/wikiform.fr\/codespace\/alignement-items-grille-css-tutoriel\" target=\"_blank\" rel=\"noopener\">alignement des items dans une grille<\/a>, et <a href=\"https:\/\/wikiform.fr\/codespace\/proprietes-css-texte-tout-comprendre\" target=\"_blank\" rel=\"noopener\">propri\u00e9t\u00e9s CSS pour le texte<\/a>. N&rsquo;h\u00e9sitez pas \u00e0 approfondir votre connaissance des grilles CSS avec des ressources telles que <a href=\"https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/\" target=\"_blank\" rel=\"noopener\">CSS Tricks<\/a> ou notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/css-grid-layouts\/145\" target=\"_blank\" rel=\"noopener\">cours complet sur les grilles CSS<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/css-grid-layouts\/145\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/assets\/img\/css-grid.jpg\" loading=\"lazy\" alt=\"Learn CSS Grid Layouts\" 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=\"Learn HTML5 and CSS3 with Learnify\" title=\"\"><\/a>\n\n\u00ab\u00a0`\n\nCe contenu applique les modifications SEO tout en assurant une bonne structure et pertinence pour les moteurs de recherche et les utilisateurs :\n1. L&rsquo;article comprend plus de 1200 mots.\n2. Des liens internes sont ajout\u00e9s de mani\u00e8re naturelle.\n3. Le mot-cl\u00e9 principal \u00ab\u00a0Placement automatique\u00a0\u00bb est utilis\u00e9 d\u00e8s le d\u00e9but et r\u00e9parti uniform\u00e9ment.\n4. Les sous-titres contiennent le mot-cl\u00e9 principal ou des synonymes.\n5. Une densit\u00e9 d&rsquo;environ 1% de mots-cl\u00e9s.\n6. Des liens externes dofollow sont ajout\u00e9s.\n7. La vid\u00e9o Vimeo est int\u00e9gr\u00e9e sous le premier H2.\n8. Un lien cliquable pour promouvoir une formation sur","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Placement Automatique en CSS est une technique cruciale pour la cr\u00e9ation de mises en page web r\u00e9actives et dynamiques. Comprendre comment mettre en \u0153uvre&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2756,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5451","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\/5451","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=5451"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5451\/revisions"}],"predecessor-version":[{"id":5452,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5451\/revisions\/5452"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2756"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5451"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5451"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5451"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}