Exercice Pratique: CSS Grid et Media Queries

Vous souhaitez créer des mises en page web adaptatives mais ne savez pas par où commencer.

Cela peut entraîner des designs peu attrayants qui ne s’ajustent pas correctement sur les différents appareils, frustrant ainsi les utilisateurs.

À travers cet article, découvrez comment utiliser CSS Grid et Tailwind pour concevoir des mises en page réactives et structurées.

Table de matière

Exercice CSS Grid avec Tailwind CSS Débuter avec Tailwind CSS Grid Design responsive avec media queries Utiliser col-start et row-start en CSS Optimiser l'ordre des éléments CSS FAQ Conclusion

Formation Maîtriser Tailwind CSS : Le guide complet

Maîtrisez Tailwind CSS : De l'installation à l'optimisation avancée

Il est temps de vous proposer un nouvel exercice pour mettre en pratique vos connaissances sur CSS Grid et les media queries avec Tailwind CSS . Préparez-vous à explorer ce défi pratique et appliquer ce que vous avez appris. Découvrons ensemble l’exercice dès maintenant.

Exercice CSS Grid avec Tailwind CSS

Cette fois-ci, nous allons réaliser la mise en page d’une page web qui s’adapte selon la taille de l’écran de l’utilisateur.

Si vous avez bien suivis le cours, vous serez capable de réaliser cet exercice les yeux fermés. D’abord vous devez remarquer que :

Pour le design mobile :nous avons une seule colonne avec la partiearticlequi est plus ou moins grand par rapport aux autres et dont l’ordre d’apparition a également changé.
Pour le design desktop :vous avez leheaderet lefooterqui sont fixes avec les éléments principaux de la page qui occupe3 colonnesqui sontnav,articleetaside.

Pour réaliser ceci, vous avez évidemment besoin de faire appel aux médias queries et le reste n’est qu’un petit jeu avec CSS Grid. Donc essayez de réaliser l’exercice par vous-même avant de passer dans la partie suivante où l’on va montrer comment arriver à ce résultat petit à petit.

Débuter avec Tailwind CSS Grid

Afin que tout le monde parte sur une bonne base, nous allons vous donner le code qui va servir de base de l’exercice et qui ressemblera à ça :

Pour réaliser cela, vous pouvez :

Regarder le code ci-après :

				
					
 <body>
<header class="bg-[#3767DA] text-white text-lg">header</header>
<article class="bg-[#D9D9D9] text-[#7F7D7D] text-lg">article</article>
<nav class="bg-[#0CC0DF] text-white text-lg">nav</nav>
<aside class="bg-[#0CC0DF] text-white text-lg">aside</aside>
<footer class="bg-[#3767DA] text-white text-lg">footer</footer>
<script src="https://cdn.tailwindcss.com" data-rocket-defer defer></script>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"59628b169a","url":"https:\/\/blog.alphorm.com\/exercice-css-grid-media-queries-tailwind","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script><script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>

Ou bien voir le CodePen correspondant à la base de cet exercice :

CodePen : Découvrez le code pour commencer l’exercice sur CSS Grid avec Tailwind.

See the Pen Application fondamentaux de jQuery by Alphorm (@alphorm) on CodePen.

Astuce Pratique : Si vous voulez utiliser une couleur particulière en HEX sur vos backgrounds ou bien vos textes vous pouvez le faire comme dans le code ci-dessus en utilisant : bg-[#……] ou text-[#……] pour indiquer la valeur de la couleur.

Déjà, nous allons partir de cette base car elle se rapproche de la version mobile de l’exercice que nous voulons réaliser.

Et pour arriver au résultat dans la présentation de l’exercice, vous allez devoir effectuer les manipulations suivantes :

Déclarer la balise body comme étant le conteneur avec grid puis mettre des gouttières de valeur 4px (gap-1)
Ajouter 5 lignes où le header , le footer , le nav et l’ aside occupe une hauteur de 70px tandis que l’article occupe l’espace restante.
Sans oublier de poser une hauteur au body pour que tout occupe l’entièreté de l’écran.

C’est ce que vous devez réaliser dans la première partie de cet exercice, une fois cela fait vous pouvez passer à la suite pour rendre le design responsive.

Design responsive avec media queries

L’objectif à présent est de pouvoir transformer notre mise en page quand on bascule sur des grands écrans en quelque chose comme ceci :

Pour y arriver, il faut premièrement choisir un média querie. Pour cet exercice nous allons utiliser lg : qui va ajouter un média querie pour les écrans larges.

Après, il y a une suite de modification que vous allez devoir réaliser :

Définir la mise en page sur trois colonnes pour les écrans larges avec 200px des deux côtés et une valeur qui s’adapte au milieu.
Faire en sorte que le header et le footer occupe les 3 trois colonnes et débute sur la première colonne toujours pour les écrans larges.
Enfin, il faudra ajouter des lignes pour les grands écrans avec 70px pour le header et le footer et une valeur automatique au milieu.

À ce stade vous devrez obtenir quelque chose comme ceci :

Que vois-je ? La place de l’article devrait normalement se trouver au milieu mais ici il se place directement après le header comme dans le code HTML. Pour résoudre cela, je vous propose deux techniques dans la prochaine partie.

Utiliser col-start et row-start en CSS

Alors la première approche c’est de définir un col-start et un row-start à l’article afin qu’il se place derrière nav. On sait que pour cela :

Il doit d’abord se mettre sur la deuxième colonne avec lg :col-start-2mais cela va casser la mise en page comme ceci :

Puis on ajouter la classelg :row-start-2à l’article afin l’espace inutilisé devant celui-ci sois remplis parnav.

Optimiser l'ordre des éléments CSS

La deuxième technique qui parlera certainement plus aux gens et que je considère comme étant une bonne pratique est l’utilisation de la classe order qui fonctionne tout aussi bien comme le nom de sa propriété CSS. Dans notre cas nous allons l’utiliser ainsi :

Ajouter la classelg :order-{n}oùnvariera de1 à 5sur la séquence suivanteheader > nav > article > aside > footer. Vous devrez alors obtenir quelques choses comme ce code :

Voilà si vous essayez de redimensionner la fenêtre de votre navigateur, vous allez obtenir l’effet escompté.

C’est ainsi que se termine notre petit exercice pour celles et ceux qui ont eu quelques difficultés, ne vous inquiétez pas. Je mets à votre disposition la correction dans le code et le CodePen suivant :

Code :

				
					
 <body class="grid gap-1 grid-rows-[70px_auto_70px_70px_70px] lg:grid-rows-[70px_auto_70px] lg:grid-cols-[200px_auto_200px] h-screen">
<header class="lg:col-start-1 lg:col-span-3 bg-[#3767DA] text-white text-lg lg:order-1">header</header>
<article class="bg-[#D9D9D9] text-[#7F7D7D] text-lg lg:order-3">article</article>
<nav class="bg-[#0CC0DF] text-white text-lg lg:order-2">nav</nav>

<aside class="bg-[#0CC0DF] text-white text-lg lg:order-4">aside</aside>

<footer class="lg:col-start-1 lg:col-span-3 bg-[#3767DA] text-white text-lg lg:order-5">footer</footer>
<script src="https://cdn.tailwindcss.com" data-rocket-defer defer></script>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"59628b169a","url":"https:\/\/blog.alphorm.com\/exercice-css-grid-media-queries-tailwind","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>

CodePen :

CodePen : Cliquer sur la figure suivante pour voir le résultat de l’exercice 3.

See the Pen Application fondamentaux de jQuery by Alphorm (@alphorm) on CodePen.

Formez-vous gratuitement avec Alphorm !

Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.

FAQ

Comment utiliser CSS Grid avec Tailwind CSS ?

Pour utiliser CSS Grid avec Tailwind CSS, commencez par définir votre conteneur avec la classe ‘grid’ dans Tailwind. Utilisez ensuite les classes de Tailwind pour définir le nombre de colonnes et de lignes souhaitées. Par exemple, la classe ‘grid-cols-3’ crée une grille avec trois colonnes. Vous pouvez également utiliser des classes comme ‘gap-1’ pour ajouter des espacements entre vos éléments. En combinant ces classes, vous pouvez créer des mises en page complexes et adaptatives en toute simplicité.

Comment rendre une mise en page responsive avec Tailwind CSS ?

Pour rendre une mise en page responsive avec Tailwind CSS, utilisez les media queries intégrées de Tailwind. Par exemple, la classe ‘lg:grid-cols-3’ s’applique uniquement sur les écrans larges, permettant de définir une disposition différente selon la taille de l’écran. Combinez ces classes avec des valeurs adaptatives pour la largeur et la hauteur, et ajustez l’ordre des éléments avec les classes ‘order’ pour garantir une disposition optimale sur tous les appareils.

Quelles sont les bonnes pratiques pour un design adaptatif ?

Pour réussir un design adaptatif, commencez par une structure simple pour les petits écrans, puis ajoutez des media queries pour ajuster la mise en page sur les écrans plus grands. Utilisez CSS Grid pour créer des dispositions flexibles et Tailwind CSS pour simplifier les ajustements. Assurez-vous que les éléments essentiels sont visibles et faciles à naviguer sur toutes les tailles d’écran. L’utilisation de flexbox et de grid permet de gérer l’espace et l’ordre des éléments efficacement.

Comment utiliser les media queries avec Tailwind CSS ?

Les media queries dans Tailwind CSS sont gérées par des préfixes comme ‘sm:’, ‘md:’, ‘lg:’, etc. Ces préfixes permettent de définir des styles spécifiques en fonction de la taille de l’écran. Par exemple, ‘lg:grid-cols-3’ appliquera une grille de trois colonnes uniquement sur les écrans larges. Ces media queries sont faciles à intégrer et à utiliser, rendant le processus de création de designs responsives plus intuitif et rapide.

Comment organiser le contenu avec CSS Grid pour un site web ?

Organiser le contenu avec CSS Grid implique de définir des lignes et des colonnes dans lesquelles vos éléments seront placés. Utilisez des classes CSS Grid de Tailwind comme ‘grid-cols-{n}’ pour définir le nombre de colonnes et ‘grid-rows-{n}’ pour les lignes. Vous pouvez contrôler la taille de chaque élément avec les classes ‘col-span-{n}’ et ‘row-span-{n}’. Cela permet de créer des mises en page dynamiques et structurées qui s’adaptent bien à différentes tailles d’écran.

Conclusion

En maîtrisant CSS Grid avec Tailwind, vous pouvez créer des mises en page web fluides et adaptatives. Quelle autre technique aimeriez-vous explorer pour améliorer vos compétences en design web adaptatif ?