{"id":5447,"date":"2024-08-27T19:45:20","date_gmt":"2024-08-27T19:45:20","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/emplacement-grille-css-techniques\/"},"modified":"2024-12-05T15:35:47","modified_gmt":"2024-12-05T15:35:47","slug":"emplacement-grille-css-techniques","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/emplacement-grille-css-techniques\/","title":{"rendered":"10.8 Emplacement sur la Grille en CSS : Techniques"},"content":{"rendered":"\n\n\n<p><strong>Emplacement sur la Grille en CSS<\/strong> est une comp\u00e9tence essentielle pour tout d\u00e9veloppeur web cherchant \u00e0 perfectionner ses designs en CSS Grid. Ma\u00eetriser les diff\u00e9rentes techniques pour placer des \u00e9l\u00e9ments sur la grille peut am\u00e9liorer consid\u00e9rablement l&rsquo;apparence et la fonctionnalit\u00e9 de vos sites web. Apprenons comment utiliser ces techniques gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 l&rsquo;Emplacement sur la Grille en CSS<\/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\/586675255?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>Utiliser CSS Grid permet de positionner les \u00e9l\u00e9ments sur une grille bas\u00e9e sur des lignes et des colonnes. En utilisant les propri\u00e9t\u00e9s telles que <code>grid-column<\/code> et <code>grid-row<\/code>, vous pouvez contr\u00f4ler pr\u00e9cis\u00e9ment o\u00f9 chaque \u00e9l\u00e9ment appara\u00eet sur la grille. Examinons maintenant ces propri\u00e9t\u00e9s et comment les utiliser efficacement.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Comprendre les Propri\u00e9t\u00e9s de Colonne et de Ligne<\/h3>\n\n\n\n<p>Pour placer un \u00e9l\u00e9ment dans une zone sp\u00e9cifique de la grille, nous utilisons les propri\u00e9t\u00e9s <code>grid-column<\/code> et <code>grid-row<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.grid-container {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  grid-template-rows: repeat(4, 100px);\n}\n\n.item1 {\n  grid-column: 1 \/ 3; \/* De la colonne 1 \u00e0 la colonne 3 *\/\n  grid-row: 1 \/ 2;     \/* De la ligne 1 \u00e0 la ligne 2 *\/\n}\n\n.item2 {\n  grid-column: 3 \/ 5; \/* De la colonne 3 \u00e0 la colonne 5 *\/\n  grid-row: 2 \/ 4;    \/* De la ligne 2 \u00e0 la ligne 4 *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Fonctions <code>span<\/code> et <code>auto<\/code><\/h3>\n\n\n\n<p>Les valeurs <code>span<\/code> et <code>auto<\/code> permettent une grande flexibilit\u00e9 dans le positionnement et le redimensionnement des \u00e9l\u00e9ments:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.grid-container {\n  display: grid;\n  grid-template-columns: 1fr 2fr 1fr;\n  grid-template-rows: 100px auto;\n}\n\n.item1 {\n  grid-column: span 2; \/* S'\u00e9tend sur 2 colonnes *\/\n  grid-row: 1 \/ 3;     \/* De la ligne 1 \u00e0 la ligne 3 *\/\n}\n\n.item2 {\n  grid-column: 1 \/ auto; \/* S'arr\u00eate \u00e0 la fin de la grille *\/\n  grid-row: auto \/ span 2; \/* S'\u00e9tend sur 2 lignes *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/wikiform.fr\/codespace\/emplacement-grille-css-techniques\" target=\"_blank\" rel=\"noopener\">Placer les \u00c9l\u00e9ments par Nom de Zone<\/a><\/h3>\n\n\n\n<p>CSS Grid permet aussi d&rsquo;utiliser des noms de zones pour un placement intuitif:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.grid-container {\n  display: grid;\n  grid-template-columns: 1fr 1fr 1fr;\n  grid-template-rows: 100px 100px;\n  grid-template-areas: \n    \"header header header\"\n    \"main sidebar .\"\n    \"footer footer footer\";\n}\n\n.header {\n  grid-area: header;\n}\n\n.main {\n  grid-area: main;\n}\n\n.sidebar {\n  grid-area: sidebar;\n}\n\n.footer {\n  grid-area: footer;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/wikiform.fr\/codespace\/placement-automatique-css-tutoriel\" target=\"_blank\" rel=\"noopener\">Utiliser les Coordonn\u00e9es Compl\u00e8tes<\/a><\/h3>\n\n\n\n<p>Pour un contr\u00f4le pr\u00e9cis, vous pouvez sp\u00e9cifier le d\u00e9but et la fin des coordonn\u00e9es des cellules:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.grid-container {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  grid-template-rows: repeat(4, 100px);\n}\n\n.item1 {\n  grid-column-start: 1;\n  grid-column-end: 3;\n  grid-row-start: 1;\n  grid-row-end: 2;\n}\n\n.item2 {\n  grid-column-start: 3;\n  grid-column-end: 5;\n  grid-row-start: 2;\n  grid-row-end: 4;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/wikiform.fr\/codespace\/alignement-grille-css-guide\" target=\"_blank\" rel=\"noopener\">Exemples Avanc\u00e9s de Positionnement sur la Grille<\/a><\/h3>\n\n\n\n<p>Pour approfondir notre compr\u00e9hension du positionnement sur la grille en CSS, voici des exemples avanc\u00e9s illustrant diverses techniques d&#8217;emplacements.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/wikiform.fr\/codespace\/emplacement-grille-css-techniques\" target=\"_blank\" rel=\"noopener\">Utilisation de Templates de Grille<\/a><\/h4>\n\n\n\n<p>Vous pouvez d\u00e9finir des structures complexes en utilisant des templates de grille:<\/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 header\"\n    \"sidebar main main right\"\n    \"sidebar footer footer right\";\n  grid-template-columns: 1fr 2fr 2fr 1fr;\n  grid-template-rows: auto;\n}\n\n.header { grid-area: header; }\n.sidebar { grid-area: sidebar; }\n.main { grid-area: main; }\n.right { grid-area: right; }\n.footer { grid-area: footer; }\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">R\u00e9organisation Dynamique des \u00c9l\u00e9ments<\/h4>\n\n\n\n<p>Les \u00e9l\u00e9ments peuvent \u00eatre r\u00e9organis\u00e9s dynamiquement en fonction de la taille de l&rsquo;\u00e9cran ou des interactions utilisateur:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>@media screen and (max-width: 768px) {\n  .grid-container {\n    grid-template-areas: \n      \"header\"\n      \"main\"\n      \"sidebar\"\n      \"right\"\n      \"footer\";\n    grid-template-columns: 1fr;\n  }\n\n  .item {\n    grid-column: span 1;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/wikiform.fr\/codespace\/alignement-grille-css-guide\" target=\"_blank\" rel=\"noopener\">Alignement des \u00c9l\u00e9ments<\/a><\/h4>\n\n\n\n<p>L&rsquo;alignement et la justification des \u00e9l\u00e9ments sur la grille peuvent \u00eatre contr\u00f4l\u00e9s avec pr\u00e9cision:<\/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: 100px 200px;\n  gap: 10px;\n  justify-items: center;\n  align-items: start;\n}\n\n.grid-item {\n  background-color: #f0f0f0;\n  padding: 20px;\n  border: 1px solid #ccc;\n}\n<\/code><\/pre>\n\n\n\n<p>En explorant davantage les concepts et les propri\u00e9t\u00e9s de CSS Grid, vous d\u00e9couvrirez des techniques puissantes pour cr\u00e9er des mises en page web complexes et r\u00e9actives. N&rsquo;h\u00e9sitez pas \u00e0 exp\u00e9rimenter avec ces exemples et \u00e0 consulter des ressources externes pour approfondir vos connaissances. Pour en savoir plus sur l&rsquo;<a href=\"https:\/\/wikiform.fr\/codespace\/fonctionnement-navigateur-web-html-guide\" target=\"_blank\" rel=\"noopener\">utilisation des navigateurs avec HTML<\/a> et les <a href=\"https:\/\/wikiform.fr\/codespace\/bases-langage-html-apprendre-fondamentaux\" target=\"_blank\" rel=\"noopener\">fondamentaux d&rsquo;HTML<\/a>, explorez nos guides d\u00e9taill\u00e9s.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>L&rsquo;<strong>emplacement sur la grille en CSS<\/strong> est une comp\u00e9tence cruciale pour tout d\u00e9veloppeur web. Utiliser la grille CSS de mani\u00e8re efficace permet de cr\u00e9er des mises en page flexibles et dynamiques, am\u00e9liorant ainsi l&rsquo;interface utilisateur. Continuez \u00e0 explorer et pratiquer avec CSS Grid pour ma\u00eetriser pleinement cette technologie essentielle. Pour plus de tutoriels sur CSS Grid, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/css-grid-interm\u00e9diaire-avanc\u00e9\/150\">les fonctionnalit\u00e9s interm\u00e9diaires et avanc\u00e9es de CSS Grid<\/a>. Pour apprendre \u00e0 cr\u00e9er une grille responsive, lisez notre <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\" target=\"_blank\" rel=\"noopener\">tutoriel d\u00e9taill\u00e9<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-expert-en-css-grid\/144\" 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","protected":false},"excerpt":{"rendered":"<p>Emplacement sur la Grille en CSS est une comp\u00e9tence essentielle pour tout d\u00e9veloppeur web cherchant \u00e0 perfectionner ses designs en CSS Grid. Ma\u00eetriser les diff\u00e9rentes&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2729,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5447","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\/5447","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=5447"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5447\/revisions"}],"predecessor-version":[{"id":6075,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5447\/revisions\/6075"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2729"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5447"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5447"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5447"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}