Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Grid Layout
Webdesign

Mise en pages CSS Grid : Devenir responsive

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Understanding the CSS Grid Layout Module.
CSS Grid Layout: Using Grid Areas
Understanding the CSS Grid “Auto-Placement Algorithm”

French (Français) translation by Henri Lotin (you can also view the original English article)

Tout au long de cette série nous nous sommes familiarisé avec la syntaxe de Grid, appris quelques moyens efficaces de la mise en pages des éléments sur une page et dit au revoir à certaines vieilles habitudes. Dans ce tutoriel, nous allons appliquer tout cela à quelques pratiques de webdesign responsive.

Media Queries

Nous allons utiliser la démo où nous l'avons laissée la dernière fois.

Il est composé de deux grilles déclarées ; notre grille principale et une grille imbriquée dans un de nos éléments. Nous pouvons contrôler quand ces grilles entrent en vigueur, à l’aide de requêtes médias (media queries), ce qui signifie que nous pouvons redéfinir complètement notre mise en pages dans différentes largeurs de fenêtre d’affichage.

Commencez par la première déclaration de grille, et enveloppons le duplicata dans une requête média mobile-first (j'utilise 500px comme point d’arrêt, mais c’est complètement arbitraire) :

Maintenant, au sein de la première déclaration, nous allons changer comment notre grille est définie, placer le tout dans une seule colonne. Nous allons juste lister une colonne dans notre règle grid-template-columns, assurez-vous que les quatre rangées, que nous avons maintenant sont définies avec grid-template-rows et organisez la mise en pages avec grid-template-areas :

Nous avons également fixé notre grid-gap à 10px juste par défaut, pour tenir compte des écrans plus petits.

Voici ce que cela nous donne. Vous remarquerez que nous utilisons également notre requête pour modifier padding et font-size sur nos éléments .grid-1 div.

Notre grille imbriquée

Elle s’occupe de la mise en pages principale, mais nous avons encore la grille imbriquée qui reste obstinément à sa disposition de deux colonnes en toutes circonstances. Pour corriger cela, nous allons faire exactement la même chose que précédemment, mais en utilisant un point d’arrêt différent pour suggérer une approche content-first :

Découvrez le résultat final sur CodePen.

Un couple de choses à noter ici :

  • Comme nous l’avons dit précédemment, vous pouvez organiser visuellement des éléments de grille quel que soit l’ordre source, et les requêtes médias signifient que nous pouvons avoir différents ordres visuels pour des largeurs différentes d’écran. Cependant, l'imbrication doit rester fidèle à la source ; les éléments de notre grille imbriquée doivent toujours être visuellement et effectivement les descendants de leur parent.
  • Les transitions CSS n’ont aucune influence sur la présentation de Grid. Lorsque nos requêtes médias se déclenchent, et nos zones de grille atteignent leurs nouvelles positions, vous ne serez pas en mesure de les adoucir sur place.

auto-fill and minmax()

Une autre (sorte d') approche réactive par rapport à Grid est bien adapté aux mises en page de type masonry ; des blocs qui se dimensionnent et fluctuent automatiquement, selon la fenêtre d’affichage.

auto-fill

Notre approche jusqu'à présent a été de dicter combien il y a de plages et voir les éléments s’adapter en conséquence. C’est ce qui se passe dans cette démo ; nous avons grid-template-columns: repeat(4, 1fr); qui dit « créer quatre colonnes et donner à chacune une seule unité de fraction de large ».

Avec le mot clé auto-fill nous pouvons dicter à quel point larges sont nos plages et laissez Grid comprendre combien vont tenir dans l’espace disponible. Dans cette démonstration, nous avons utilisé grid-template-columns: repeat(auto-fill, 9em); qui dit « donner aux colonnes une largeur de 9em chacune et s’adapter autant que possible dans le conteneur de la grille ».

Remarque : cela tient également compte de nos gouttières, la grid-gap.

Le conteneur dans ces démos possède un fond sombre pour montrer clairement combien d’espace est disponible, et vous verrez qu’il n’a pas été complètement rempli dans le dernier exemple. Alors, comment procédons-nous ?

minmax()

La fonction minmax() permet de définir une taille minimum et maximale pour une plage, permettant à Grid de travailler à l'intérieur. Par exemple, nous pourrions configurer trois colonnes, les deux premières étant 1fr de large, la dernière étant un maximum de 1fr, mais ne diminue pas de plus petit que 160px :

Toutes les colonnes se contracteront comme vous réduisez la largeur de la fenêtre, mais la dernière colonne sera seulement poussée de côté. Regardez.

Retour à notre démo auto-fill, si nous devions modifier notre largeur de colonne de minmax (9em, 1fr) Grid placerait les titres 9em autant que possible, mais ensuite les étendrait à un maximum de 1fr jusqu'à ce que le conteneur soit rempli :

Mise en garde : Grid recalcule les plages après rechargement de la page (essayez de redimensionner la fenêtre du navigateur et en appuyez sur actualiser) mais elle ne le fera pas lors du redimensionnement de la fenêtre. Les requêtes média peuvent être utilisées pour modifier les valeurs, mais elles ne joueront pas le jeu avec le redimensionnement de la fenêtre.

Conclusion

Nous allons conclure avec quelques points :

  • Les requêtes média peuvent nous aider à réorganiser complètement les mises en pages de Grid en redéfinissant grid-template-areas (et d'autres choses) pour différents scénarios.
  • Les transitions CSS n’ont aucun effet sur les modifications apportées à la présentation de la grille.
  • Le mot clé auto-fill est utile pour le remplissage des conteneurs de la grille.
  • La fonction minmax() complète auto-fill élégamment, en s’assurant que les conteneurs sont remplis correctement, mais ne nous donne pas le « responsive » dans le vrai sens du mot.

Avec les leçons tirées de cette série, vous êtes armé pour sortir et commencer à jouer avec Grid ! Restez connecté pour plus de tutoriels sur Grid, des exercices pratiques, des solutions aux problèmes courants de mise en page et des mises à jour.

Ressources utiles

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.