{"id":5435,"date":"2024-08-27T19:20:48","date_gmt":"2024-08-27T19:20:48","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/creation-grille-css-guide-pratique\/"},"modified":"2024-12-03T17:41:18","modified_gmt":"2024-12-03T17:41:18","slug":"creation-grille-css-guide-pratique","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/creation-grille-css-guide-pratique\/","title":{"rendered":"10.2 Cr\u00e9ation d&rsquo;une Grille en CSS : Guide Pratique"},"content":{"rendered":"\n<p><strong>10.2 Cr\u00e9ation d&rsquo;une Grille en CSS<\/strong> est une comp\u00e9tence essentielle pour la conception de pages web modernes. Ma\u00eetriser cette technique permet de structurer efficacement les mises en page tout en conservant une flexibilit\u00e9 et une adaptabilit\u00e9 ind\u00e9niables. Dans ce guide, nous allons d\u00e9couvrir comment cr\u00e9er et manipuler une grille en CSS pour am\u00e9liorer votre exp\u00e9rience de d\u00e9veloppement front-end.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la <strong>Cr\u00e9ation d&rsquo;une 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:\/\/player.vimeo.com\/video\/586674838?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 ? originalPrice.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>La <strong>grille CSS<\/strong> est un puissant module de mise en page bas\u00e9 sur un syst\u00e8me de lignes et de colonnes. Elle permet de cr\u00e9er des mises en page complexes en toute simplicit\u00e9. Apr\u00e8s avoir visionn\u00e9 la vid\u00e9o ci-dessus, vous aurez une meilleure compr\u00e9hension des concepts de base de la grille CSS. Voici les \u00e9tapes d\u00e9taill\u00e9es pour cr\u00e9er une grille en CSS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Commencez par d\u00e9finir la Grille<\/h3>\n\n\n\n<p>Tout d&rsquo;abord, vous devez d\u00e9finir un conteneur de grille en utilisant la propri\u00e9t\u00e9 <code>display: grid;<\/code>. Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.grid-container {\n  display: grid;\n  grid-template-columns: auto auto auto;\n  background-color: #2196F3;\n  padding: 10px;\n}<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, le conteneur de grille cr\u00e9\u00e9 contient trois colonnes d\u00e9finies par la propri\u00e9t\u00e9 <code>grid-template-columns<\/code>. Le r\u00e9sultat est une disposition avec des colonnes de largeur automatique, qui s&rsquo;ajustent en fonction du contenu.<\/p>\n\n\n\n<p>Pour en savoir plus sur la syntaxe CSS, visitez notre <a href=\"https:\/\/wikiform.fr\/codespace\/syntaxe-css-bases-connaitre\" target=\"_blank\" rel=\"noopener\">guide sur les bases de la syntaxe CSS<\/a>. Apprenez \u00e9galement comment <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-div-span-css-guide-complet\" target=\"_blank\" rel=\"noopener\">utiliser les \u00e9l\u00e9ments div et span avec CSS<\/a> pour une meilleure structuration globale de votre page web.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter des \u00c9l\u00e9ments de Grille<\/h3>\n\n\n\n<p>Pour ajouter des \u00e9l\u00e9ments dans notre grille, nous devons simplement ajouter du contenu HTML \u00e0 l&rsquo;int\u00e9rieur du conteneur :<\/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;<\/code><\/pre>\n\n\n\n<p>Ces \u00e9l\u00e9ments de grille s&rsquo;adapteront automatiquement pour remplir les espaces de la grille d\u00e9finie. Nous pouvons les styliser facilement en utilisant du CSS :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.grid-item {\n  background-color: rgba(255, 255, 255, 0.8);\n  border: 1px solid rgba(0, 0, 0, 0.8);\n  padding: 20px;\n  font-size: 30px;\n  text-align: center;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Alignement et Espacement des \u00c9l\u00e9ments<\/h3>\n\n\n\n<p>Maintenant que nous avons notre grille de base, voyons comment aligner et espacer les \u00e9l\u00e9ments. Les propri\u00e9t\u00e9s de justifications de contenu comme <code>justify-items<\/code>, <code>align-items<\/code>, <code>justify-content<\/code>, et <code>align-content<\/code> nous aident \u00e0 atteindre cet objectif :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.grid-container {\n  display: grid;\n  grid-template-columns: auto auto auto;\n  gap: 10px; \/* Ajouter de l'espacement entre les \u00e9l\u00e9ments *\/\n  justify-content: center; \/* Centre les \u00e9l\u00e9ments sur l'axe principal *\/\n  align-content: center; \/* Centre les \u00e9l\u00e9ments sur l'axe transversal *\/\n}<\/code><\/pre>\n\n\n\n<p>Afin de renforcer vos comp\u00e9tences en CSS, n&rsquo;oubliez pas de consulter notre <a href=\"https:\/\/wikiform.fr\/codespace\/gestion-police-css-utiliser-font-family\" target=\"_blank\" rel=\"noopener\">guide sur la gestion des polices avec CSS<\/a>. Cela vous aidera \u00e0 donner une esth\u00e9tique professionnelle \u00e0 vos projets.<\/p>\n\n\n\n<p>Avec ces ajustements, nous pouvons cr\u00e9er une disposition de grille qui ne se contente pas seulement d&rsquo;agencer les \u00e9l\u00e9ments, mais qui le fait de mani\u00e8re align\u00e9e et \u00e9quilibr\u00e9e.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er des Dispositions Complexes<\/h3>\n\n\n\n<p>Les grilles CSS permettent \u00e9galement de cr\u00e9er des dispositions plus complexes en utilisant les propri\u00e9t\u00e9s <code>grid-template-areas<\/code> et <code>grid-area<\/code>. Cela permet de nommer les zones de la grille et de les organiser de mani\u00e8re flexible :<\/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    'menu main main main'\n    'footer footer footer footer';\n  gap: 10px;\n}<\/code><\/pre>\n\n\n\n<p>Vous pouvez ensuite assigner chaque \u00e9l\u00e9ment de la grille \u00e0 une zone sp\u00e9cifique :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div class=\"grid-container\"&gt;\n  &lt;div class=\"header\"&gt;Header&lt;\/div&gt;\n  &lt;div class=\"menu\"&gt;Menu&lt;\/div&gt;\n  &lt;div class=\"main\"&gt;Main&lt;\/div&gt;\n  &lt;div class=\"footer\"&gt;Footer&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.header {\n  grid-area: header;\n}\n\n.menu {\n  grid-area: menu;\n}\n\n.main {\n  grid-area: main;\n}\n\n.footer {\n  grid-area: footer;\n}<\/code><\/pre>\n\n\n\n<p>Pour plus de tutoriels sur la mani\u00e8re de structurer vos pages web, consultez nos <a href=\"https:\/\/wikiform.fr\/codespace\/maquette-site-html-comment-faire\" target=\"_blank\" rel=\"noopener\">guides d\u00e9taill\u00e9s sur la cr\u00e9ation de maquettes de sites HTML<\/a>.<\/p>\n\n\n\n<p>La cr\u00e9ation de disposition complexe est d\u00e9sormais \u00e0 votre port\u00e9e. Apprenez \u00e9galement \u00e0 g\u00e9rer l&rsquo;affichage de vos images en d\u00e9couvrant notre <a href=\"https:\/\/wikiform.fr\/codespace\/image-arriere-plan-css-background-image\" target=\"_blank\" rel=\"noopener\">guide sur l&rsquo;utilisation des images de fond avec le background CSS<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Exemple Complet<\/h3>\n\n\n\n<p>Regroupons toutes ces \u00e9tapes pour cr\u00e9er un exemple complet et fonctionnel :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n  &lt;style&gt;\n    .grid-container {\n      display: grid;\n      grid-template-columns: auto auto auto;\n      gap: 10px;\n      padding: 10px;\n    }\n\n    .grid-item {\n      background-color: rgba(255, 255, 255, 0.8);\n      border: 1px solid rgba(0, 0, 0, 0.8);\n      padding: 20px;\n      font-size: 30px;\n      text-align: center;\n    }\n\n    .complex-grid-container {\n      display: grid;\n      grid-template-areas:\n        'header header header header'\n        'menu main main main'\n        'footer footer footer footer';\n      gap: 10px;\n    }\n\n    .header { grid-area: header; }\n    .menu { grid-area: menu; }\n    .main { grid-area: main; }\n    .footer { grid-area: footer; }\n\n    .complex-grid-container &gt; div {\n      background-color: rgba(255, 255, 255, 0.8);\n      border: 1px solid rgba(0, 0, 0, 0.8);\n      padding: 20px;\n      text-align: center;\n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n  &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\n  &lt;h3&gt;Exemple de Grille Complexe&lt;\/h3&gt;\n  &lt;div class=\"complex-grid-container\"&gt;\n    &lt;div class=\"header\"&gt;Header&lt;\/div&gt;\n    &lt;div class=\"menu\"&gt;Menu&lt;\/div&gt;\n    &lt;div class=\"main\"&gt;Main&lt;\/div&gt;\n    &lt;div class=\"footer\"&gt;Footer&lt;\/div&gt;\n  &lt;\/div&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion sur la Cr\u00e9ation d&rsquo;une Grille en CSS<\/h2>\n\n\n\n<p>Cr\u00e9er une <strong>grille en CSS<\/strong> offre de nombreuses possibilit\u00e9s pour structurer vos pages web de mani\u00e8re efficace et attrayante. En combinant les concepts de base et avanc\u00e9s que nous avons explor\u00e9s, vous pourrez concevoir des interfaces robustes et r\u00e9actives adapt\u00e9es \u00e0 divers dispositifs. Continuez \u00e0 exp\u00e9rimenter avec les propri\u00e9t\u00e9s de grille CSS pour d\u00e9couvrir des mises en page encore plus complexes et cr\u00e9atives.<\/p>\n\n\n\n<p>Pour approfondir davantage vos connaissances, explorez notre <a href=\"https:\/\/wikiform.fr\/codespace\/presentation-grilles-css-grid-layout\" target=\"_blank\" rel=\"noopener\">guide sur la pr\u00e9sentation des grilles CSS <\/a> et notre <a href=\"https:\/\/wikiform.fr\/codespace\/creation-layout-simple-medias-queries\" target=\"_blank\" rel=\"noopener\">guide sur la cr\u00e9ation de layout simple avec les media queries<\/a><\/p>\n\n\n","protected":false},"excerpt":{"rendered":"<p>10.2 Cr\u00e9ation d&rsquo;une Grille en CSS est une comp\u00e9tence essentielle pour la conception de pages web modernes. Ma\u00eetriser cette technique permet de structurer efficacement les&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2715,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5435","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\/5435","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=5435"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5435\/revisions"}],"predecessor-version":[{"id":6069,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5435\/revisions\/6069"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2715"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5435"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5435"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5435"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}