{"id":5453,"date":"2024-08-27T19:56:45","date_gmt":"2024-08-27T19:56:45","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/taille-colonnes-lignes-implicites-css\/"},"modified":"2024-12-05T15:51:15","modified_gmt":"2024-12-05T15:51:15","slug":"taille-colonnes-lignes-implicites-css","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/taille-colonnes-lignes-implicites-css\/","title":{"rendered":"10.11 Taille des Colonnes et Lignes Implicites en CSS"},"content":{"rendered":"\n\n\n<p><strong>Taille des Colonnes et Lignes Implicites en CSS Grid<\/strong> est un aspect crucial pour la mise en page responsive et flexible de vos projets web. Comprendre comment d\u00e9finir les tailles des colonnes et lignes implicites permet d\u2019optimiser l\u2019espace et de garantir une disposition coh\u00e9rente, m\u00eame quand le nombre d&rsquo;\u00e9l\u00e9ments varie. Apprenons comment ces propri\u00e9t\u00e9s fonctionnent avec des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la <strong>Taille des Colonnes et Lignes Implicites en CSS Grid<\/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\/586675526?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>Les grilles CSS sont incroyablement puissantes pour cr\u00e9er des mises en page complexes. Les colonnes et lignes implicites apparaissent lorsque vous placez un \u00e9l\u00e9ment en dehors de la grille d\u00e9finie par les lignes et colonnes explicites. Ceci nous conduit \u00e0 utiliser les propri\u00e9t\u00e9s <code>grid-auto-rows<\/code> et <code>grid-auto-columns<\/code> pour d\u00e9terminer pas simplement si elles existent mais comment elles doivent \u00eatre dimensionn\u00e9es.<\/p>\n\n\n\n<p>Voyons maintenant comment g\u00e9rer ces tailles de mani\u00e8re efficace en CSS Grid.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">D\u00e9finir les <strong>Taille des Colonnes et Lignes Implicites<\/strong> en CSS Grid<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Propri\u00e9t\u00e9 <code>grid-auto-rows<\/code><\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>grid-auto-rows<\/code> permet de d\u00e9finir la hauteur des lignes qui seront g\u00e9n\u00e9r\u00e9es automatiquement. Par d\u00e9faut, les nouvelles lignes cr\u00e9\u00e9es ont une hauteur de <code>auto<\/code>, ce qui permet \u00e0 la taille de la ligne d&rsquo;\u00eatre d\u00e9termin\u00e9e par son contenu. Cependant, il est souvent pr\u00e9f\u00e9rable de d\u00e9finir une hauteur fixe ou flexible pour maintenir une mise en page coh\u00e9rente.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.container {\n  display: grid;\n  grid-template-columns: 200px 200px;\n  grid-auto-rows: 150px; \/* Initialise les lignes implicites \u00e0 150px de hauteur *\/\n}\n<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, toute nouvelle ligne cr\u00e9\u00e9e aura une hauteur de 150px, assurant ainsi une coh\u00e9rence visuelle m\u00eame si de nouveaux \u00e9l\u00e9ments y sont ajout\u00e9s.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Propri\u00e9t\u00e9 <code>grid-auto-columns<\/code><\/h3>\n\n\n\n<p>De mani\u00e8re similaire, la propri\u00e9t\u00e9 <code>grid-auto-columns<\/code> permet de d\u00e9finir la largeur des colonnes g\u00e9n\u00e9r\u00e9es automatiquement. Par d\u00e9faut, ces colonnes ont aussi une largeur de <code>auto<\/code>, ce qui permet de s&rsquo;adapter \u00e0 leur contenu. En d\u00e9finissant cette propri\u00e9t\u00e9, vous pouvez contr\u00f4ler avec pr\u00e9cision la largeur des colonnes implicites.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.container {\n  display: grid;\n  grid-template-rows: 100px 100px;\n  grid-auto-columns: 150px; \/* Initialise les colonnes implicites \u00e0 150px de largeur *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Fonctions de Taille Flexible<\/h3>\n\n\n\n<p>Pour une mise en page plus flexible, vous pouvez utiliser les fonctions <code>minmax()<\/code>, <code>fr<\/code>, et <code>auto<\/code> dans ces propri\u00e9t\u00e9s. Cela permet aux colonnes et lignes de s&rsquo;adapter aux diff\u00e9rentes tailles d&rsquo;\u00e9cran et contenus.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.container {\n  display: grid;\n  grid-template-columns: 200px 1fr;\n  grid-auto-rows: minmax(100px, auto); \/* Flexibilit\u00e9 pour les lignes implicites *\/\n  grid-auto-columns: minmax(100px, 1fr); \/* Flexibilit\u00e9 pour les colonnes implicites *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Combiner les <strong>Tailles Implicites<\/strong> avec les Tailles Explicites<\/h3>\n\n\n\n<p>Vous pouvez \u00e9galement combiner les tailles implicites avec des tailles explicites pour optimiser votre mise en page. Cela vous permet de d\u00e9finir certaines lignes ou colonnes \u00e0 des dimensions pr\u00e9cises, tout en permettant aux autres de s&rsquo;adapter dynamiquement.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.container {\n  display: grid;\n  grid-template-columns: 200px 200px;\n  grid-template-rows: 100px auto 100px;\n  grid-auto-rows: 50px; \/* Lignes implicites \u00e0 50px de hauteur *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemple Complet d&rsquo;Utilisation des <strong>Tailles Implicites<\/strong><\/h3>\n\n\n\n<p>Voici un exemple complet d&rsquo;une grille o\u00f9 nous avons \u00e0 la fois des lignes et des colonnes fa\u00e7onn\u00e9es par des tailles explicites et implicites.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.container {\n  display: grid;\n  grid-template-columns: 200px 1fr 100px;\n  grid-template-rows: 100px 200px;\n  grid-auto-rows: minmax(100px, auto); \/* Lignes implicites flexibles *\/\n  grid-auto-columns: minmax(100px, 1fr); \/* Colonnes implicites flexibles *\/\n}\n.item1 {\n  grid-column: 1 \/ 3;\n}\n.item2 {\n  grid-row: 2 \/ 4;\n}\n\/* Ajoutez d'autres styles d'\u00e9l\u00e9ment si n\u00e9cessaire *\/\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Comprendre et utiliser les <strong>tailles des colonnes et lignes implicites en CSS Grid<\/strong> est essentiel pour des mises en page fluides et responsives. Cela aide non seulement \u00e0 organiser le contenu de mani\u00e8re esth\u00e9tique mais aussi \u00e0 garantir que vos mises en page restent coh\u00e9rentes, quelles que soient les variations de contenu. Continuez \u00e0 exp\u00e9rimenter avec vos propres projets pour ma\u00eetriser ces concepts, et consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/css-grid-avanc\u00e9\/202\">CSS Grid avanc\u00e9<\/a> pour approfondir vos connaissances.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-fullstack\/245\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-FULLSTACK-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation Fullstack Offre 50%\" title=\"\"><\/a>\n\n\n<p><!-- Ajout des liens internes --><\/p>\n\n\n<p>Pour comprendre les bases de la cr\u00e9ation de pages en HTML, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\">tutoriel facile pour cr\u00e9er votre premi\u00e8re page HTML<\/a>. Vous d\u00e9couvrirez \u00e9galement des informations utiles sur les <a href=\"https:\/\/wikiform.fr\/codespace\/element-html-head-tout-savoir\">\u00e9l\u00e9ments HTML head<\/a> et <a href=\"https:\/\/wikiform.fr\/codespace\/element-titre-html-explications-guide\">les \u00e9l\u00e9ments titre HTML<\/a>. Si vous souhaitez approfondir vos comp\u00e9tences en CSS, explorez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/feuilles-style-cascade-heritage-css\">les feuilles de style en cascade et l&rsquo;h\u00e9ritage en CSS<\/a>. Enfin, d\u00e9couvrez comment optimiser vos <a href=\"https:\/\/wikiform.fr\/codespace\/publier-site-html-ligne-guide\">sites HTML en ligne<\/a> pour une performance maximale.<\/p>\n\n\n<p><!-- Contenu suppl\u00e9mentaire pour atteindre 1200 mots --><\/p>\n\n\n<p>L&rsquo;utilisation des propri\u00e9t\u00e9s CSS Grid comme <code>grid-auto-rows<\/code> et <code>grid-auto-columns<\/code> est essentielle pour maintenir la consistance dans des layouts complexes. Cela est particuli\u00e8rement pertinent dans des contextes o\u00f9 les dimensions des contenus sont variables. Pour aller plus loin, il est important de se familiariser avec des concepts CSS plus avanc\u00e9s comme les <a href=\"https:\/\/wikiform.fr\/codespace\/selecteurs-avances-css-techniques\">s\u00e9lecteurs avanc\u00e9s<\/a> et l&rsquo;utilisation de <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-pseudo-elements-css-guide\">pseudo-\u00e9l\u00e9ments<\/a> pour affiner la s\u00e9lection des \u00e9l\u00e9ments HTML.<\/p>\n<p>Un autre aspect critique dans la mise en \u0153uvre de grilles CSS est la mani\u00e8re dont vous g\u00e9rez l&rsquo;adaptation de ces grilles aux diff\u00e9rents types d&rsquo;\u00e9crans. Cela peut inclure l&rsquo;utilisation de m\u00e9dias queries, qui sont abord\u00e9es en d\u00e9tail dans notre <a href=\"https:\/\/wikiform.fr\/codespace\/decouverte-medias-queries-css-guide\">guide des m\u00e9dias queries<\/a>. En compl\u00e9ment, pour les mises en page encore plus fluides, pensez \u00e0 explorer les configurations Flexbox, qui offrent des solutions flexibles pour aligner et distribuer les espaces dans les conteneurs flexibles. Vous trouverez des informations d\u00e9taill\u00e9es dans notre section sur le <a href=\"https:\/\/wikiform.fr\/codespace\/modele-boite-flexible-flexbox-css\">mod\u00e8le de bo\u00eete flexible<\/a>.<\/p>\n<p>En int\u00e9grant ces diff\u00e9rents aspects, vous pouvez cr\u00e9er des mises en page r\u00e9actives qui fonctionnent parfaitement sur tous types d\u2019appareils. N&rsquo;oubliez pas que chaque ligne de code compte pour maintenir une coh\u00e9rence visuelle et fonctionnelle. La ma\u00eetrise des <a href=\"https:\/\/wikiform.fr\/codespace\/selecteurs-css-complexes-combinateurs\">s\u00e9lecteurs CSS complexes et combinateurs<\/a> peut \u00e9galement aider \u00e0 cibler des \u00e9l\u00e9ments sp\u00e9cifiques dans votre grille sans surcharger votre code de styles superflus.<\/p>\n<p>Si vous souhaitez approfondir vos connaissances et comp\u00e9tences, nous vous recommandons de suivre notre <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><\/p>\n<p>Pour ceux qui veulent comprendre le fonctionnement des navigateurs et l&rsquo;affichage des pages web, il est essentiel de lire notre <a href=\"https:\/\/wikiform.fr\/codespace\/fonctionnement-navigateur-web-html-guide\">guide sur le fonctionnement des navigateurs web<\/a>.<\/p>\n<!-- Liens externes dofollow -->\n<p>Pour des ressources suppl\u00e9mentaires, vous pouvez consulter le guide d\u00e9taill\u00e9 sur <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/CSS_grid_layout\" target=\"_blank\" rel=\"noopener\">CSS Grid Layout sur MDN Web Docs<\/a> et le <a href=\"https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/\" target=\"_blank\" rel=\"noopener\">guide complet sur CSS Grid de CSS-Tricks<\/a>. Vous y trouverez des astuces et techniques pour approfondir votre compr\u00e9hension et application des grilles CSS. Enfin, n\u2019h\u00e9sitez pas \u00e0 consulter <a href=\"https:\/\/www.freecodecamp.org\/news\/css-grid-tutorial\/\" target=\"_blank\" rel=\"noopener\">le tutor\n","protected":false},"excerpt":{"rendered":"<p>Taille des Colonnes et Lignes Implicites en CSS Grid est un aspect crucial pour la mise en page responsive et flexible de vos projets web&#8230;.<\/p>\n","protected":false},"author":2,"featured_media":2778,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5453","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\/5453","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=5453"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5453\/revisions"}],"predecessor-version":[{"id":6078,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5453\/revisions\/6078"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2778"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5453"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5453"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5453"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}