{"id":5433,"date":"2024-08-27T19:16:53","date_gmt":"2024-08-27T19:16:53","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/presentation-grilles-css-grid-layout\/"},"modified":"2024-12-03T17:36:52","modified_gmt":"2024-12-03T17:36:52","slug":"presentation-grilles-css-grid-layout","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/presentation-grilles-css-grid-layout\/","title":{"rendered":"10.1 Pr\u00e9sentation des Grilles CSS : Utiliser CSS Grid Layout"},"content":{"rendered":"\n\n\n<p><strong>Pr\u00e9sentation des Grilles CSS : Utiliser CSS Grid Layout<\/strong> est un sujet essentiel pour quiconque souhaite ma\u00eetriser la cr\u00e9ation de mises en page web modernes et r\u00e9actives. Le <strong>CSS Grid Layout<\/strong> est une puissante m\u00e9thode de mise en page qui permet de cr\u00e9er des designs complexes et dynamiques plus facilement qu&rsquo;avec les m\u00e9thodes traditionnelles. D\u00e9couvrons comment mettre en place et utiliser CSS Grid Layout \u00e0 travers des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction au <strong>CSS Grid Layout<\/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\/586674775?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><strong>CSS Grid Layout<\/strong> est un syst\u00e8me de grille bidimensionnelle qui permet de placer des \u00e9l\u00e9ments dans une grille compos\u00e9e de lignes et de colonnes. Contrairement \u00e0 Flexbox, qui est principalement unidimensionnel (ligne ou colonne), CSS Grid permet de structurer des mises en page plus complexes. Voici un aper\u00e7u de ses principales caract\u00e9ristiques et de la fa\u00e7on de les impl\u00e9menter.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er une Grille de Base avec CSS Grid<\/h3>\n\n\n\n<p>Pour cr\u00e9er une grille de base, vous devez d&rsquo;abord d\u00e9finir un conteneur et d\u00e9clarer les colonnes et lignes de la grille. Voici comment proc\u00e9der :<\/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); \/* Trois colonnes \u00e9gales *\/\n  grid-template-rows: auto; \/* Les lignes s'ajustent automatiquement \u00e0 la hauteur du contenu *\/\n  gap: 10px; \/* Espace entre les \u00e9l\u00e9ments de la grille *\/\n}\n<\/code><\/pre>\n\n\n\n<p>Ensuite, vous pouvez ajouter des \u00e9l\u00e9ments \u00e0 votre grille :<\/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\">Positionner les \u00c9l\u00e9ments dans la Grille<\/h3>\n\n\n\n<p>Vous pouvez \u00e9galement contr\u00f4ler o\u00f9 chaque \u00e9l\u00e9ment doit \u00eatre plac\u00e9 dans la grille \u00e0 l&rsquo;aide des propri\u00e9t\u00e9s <code>grid-column<\/code> et <code>grid-row<\/code>. Par exemple, pour placer un \u00e9l\u00e9ment de fa\u00e7on sp\u00e9cifique :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.grid-item-1 {\n  grid-column: 1 \/ 3; \/* Occupe les colonnes 1 \u00e0 2 *\/\n  grid-row: 1; \/* Occupe la premi\u00e8re ligne *\/\n}\n<\/code><\/pre>\n\n\n\n<p>Appliquez cette classe \u00e0 un \u00e9l\u00e9ment :<\/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 grid-item-1\"&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\">Grilles R\u00e9actives avec CSS Grid<\/h3>\n\n\n\n<p>Avec CSS Grid, vous pouvez facilement cr\u00e9er des grilles r\u00e9actives qui s&rsquo;adaptent \u00e0 diff\u00e9rentes tailles d&rsquo;\u00e9cran en utilisant des Media Queries.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>@media (max-width: 600px) {\n  .grid-container {\n    grid-template-columns: 1fr; \/* Une seule colonne sur petits \u00e9crans *\/\n  }\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s de CSS Grid<\/h3>\n\n\n\n<p>Voyons maintenant quelques exemples avanc\u00e9s qui d\u00e9montrent les capacit\u00e9s de CSS Grid.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Grille de Base avec des Mod\u00e8les de Zone<\/h4>\n\n\n\n<p>Les zones de grille permettent de nommer des zones sp\u00e9cifiques de la grille et d&rsquo;y placer des \u00e9l\u00e9ments :<\/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    'main main sidebar'\n    'footer footer footer';\n}\n\n.header { grid-area: header; }\n.main { grid-area: main; }\n.sidebar { grid-area: sidebar; }\n.footer { grid-area: footer; }\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Grille Dynamiques Bas\u00e9es sur le Contenu<\/h4>\n\n\n\n<p>Les grilles dynamiques bas\u00e9es sur le contenu permettent aux \u00e9l\u00e9ments de s&rsquo;ajuster automatiquement :<\/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; \/* Les colonnes s'ajustent automatiquement bas\u00e9 sur le contenu *\/\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Grille avec des Alignements Complexes<\/h4>\n\n\n\n<p>Utilisez les propri\u00e9t\u00e9s d&rsquo;alignement pour positionner pr\u00e9cis\u00e9ment les \u00e9l\u00e9ments dans la grille :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.grid-container {\n  display: grid;\n  justify-items: center; \/* Centrer les \u00e9l\u00e9ments horizontalement *\/\n  align-items: center; \/* Centrer les \u00e9l\u00e9ments verticalement *\/\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Le <strong>CSS Grid Layout<\/strong> est un outil incroyablement puissant pour la cr\u00e9ation de mises en page web modernes, complexes et dynamiques. Avec CSS Grid, vous pouvez concevoir des designs r\u00e9actifs et multidimensionnels qui \u00e9taient auparavant difficiles \u00e0 r\u00e9aliser avec les techniques traditionnelles. Continuez \u00e0 explorer CSS Grid pour d\u00e9couvrir toutes ses capacit\u00e9s. Pour plus de tutoriels sur CSS Grid Layout, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/css-avanc\u00e9\/150\">les fonctionnalit\u00e9s avanc\u00e9es de CSS<\/a>. Pour apprendre \u00e0 cr\u00e9er des mises en page responsives avec CSS Grid, lisez notre <a href=\"https:\/\/wikiform.fr\/codespace\/cr\u00e9er-des-mises-en-page-responsives-avec-css-grid\">tutoriel d\u00e9taill\u00e9<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-expert-en-css\/144\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation CSS Offre 50%\" title=\"\"><\/a>\n\n\n<p>.<\/p>\n<p><!-- Ajout de contenu pertinent pour atteindre 1200 mots --><\/p>\n\n\n<h3 class=\"wp-block-heading\">Applications Pratiques de CSS Grid<\/h3>\n\n\n\n<p>Le <a href=\"https:\/\/wikiform.fr\/codespace\/presentation-grilles-css-grid-layout\" target=\"_blank\" rel=\"noopener\">CSS Grid Layout<\/a> n&rsquo;est pas seulement utile pour des mises en page traditionnelles, mais aussi pour des applications plus sp\u00e9cifiques et avanc\u00e9es. Voici quelques applications concr\u00e8tes :<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Galeries d&rsquo;images<\/h4>\n\n\n\n<p>CSS Grid est id\u00e9al pour cr\u00e9er des galeries d&rsquo;images fluides et r\u00e9actives. Chaque image peut s&rsquo;ajuster automatiquement pour une meilleure pr\u00e9sentation visuelle, sans n\u00e9cessiter de calculs complexes.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div class=\"grid-gallery\"&gt;\n  &lt;div class=\"grid-item\"&gt;&lt;img src=\"image1.jpg\" alt=\"Image 1\"&gt;&lt;\/div&gt;\n  &lt;div class=\"grid-item\"&gt;&lt;img src=\"image2.jpg\" alt=\"Image 2\"&gt;&lt;\/div&gt;\n  &lt;div class=\"grid-item\"&gt;&lt;img src=\"image3.jpg\" alt=\"Image 3\"&gt;&lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;style&gt;\n  .grid-gallery {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n    gap: 10px;\n  }\n  .grid-item img {\n    width: 100%;\n    height: auto;\n  }\n&lt;\/style&gt;\n<\/code><\/pre>\n\n\n\n<p>Pour comprendre comment int\u00e9grer une galerie d&rsquo;images dans une page HTML plus complexe, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\" target=\"_blank\" rel=\"noopener\">tutoriel sur la cr\u00e9ation d\u2019une premi\u00e8re page HTML<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Tableaux de Bord<\/h4>\n\n\n\n<p>Avec CSS Grid, les tableaux de bord peuvent \u00eatre con\u00e7us de mani\u00e8re beaucoup plus simple et flexible, en pla\u00e7ant les diff\u00e9rents widgets dans une grille. Cette m\u00e9thode offre une mani\u00e8re \u00e9conomique d&rsquo;utiliser l&rsquo;espace disponible sur l&rsquo;\u00e9cran.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div class=\"dashboard-grid\"&gt;\n  &lt;div class=\"widget widget-1\"&gt;&lt;\/div&gt;\n  &lt;div class=\"widget widget-2\"&gt;&lt;\/div&gt;\n  &lt;div class=\"widget widget-3\"&gt;&lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;style&gt;\n  .dashboard-grid {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 20px;\n  }\n  .widget {\n    background: #f4f4f4;\n    padding: 10px;\n    border: 1px solid #ddd;\n  }\n&lt;\/style&gt;\n<\/code><\/pre>\n\n\n\n<p>Pour apprendre comment\n","protected":false},"excerpt":{"rendered":"<p>Pr\u00e9sentation des Grilles CSS : Utiliser CSS Grid Layout est un sujet essentiel pour quiconque souhaite ma\u00eetriser la cr\u00e9ation de mises en page web modernes&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2759,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5433","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\/5433","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=5433"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5433\/revisions"}],"predecessor-version":[{"id":6068,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5433\/revisions\/6068"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2759"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5433"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5433"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}