Les mises en page de grille CSS changent la façon dont les concepteurs Web travaillent et permettent au contenu du site Web d’être conçu plus efficacement. Elle était attendue depuis longtemps, mais finalement cette approche a vraiment pris son envol et est en cours de production dans de nombreux cas. Il a révolutionné la façon dont les sites Web sont conçus. Une fois que les concepteurs ont compris, les mises en page Web deviennent plus flexibles.

Si vous avez essayé de concevoir des grilles en CSS et lu des didacticiels sur le Web, vous avez peut-être trouvé des informations liées à une approche générale de la mise en page. Des choses comme: en-tête, contenu, pied de page, etc. Cependant, CSS Grid peut également être utile pour d’autres détails de site Web comme des cartes. Les mises en page de carte sont un moyen courant d’afficher du contenu et peuvent être créées efficacement à l’aide de CSS Grid. Avec cette méthode, les zones du contenu de la carte peuvent être facilement répétées, peuvent être visualisées sur de nombreux types d’appareils différents et la taille peut être facilement contrôlée.

Outils de mise en page de grille CSS

Au fur et à mesure que vous avancez, vous voudrez vérifier les choses sur la page. Firefox dispose d’excellents outils de développement pour afficher les zones de grille. Dans la version 52 de Firefox dans les outils de développement, vous verrez une superposition qui décrit la grille. Firefox Developer Edition a également cette capacité.

Mise en page par la mise en page de la carte de volant d'inertie Mise en page de la grille CSS Comment faire un didacticiel sur les outils d'inspection

Vous choisissez la grille de superposition que vous souhaitez afficher (il peut y en avoir plusieurs selon le design). Les paramètres d’affichage de la grille vous permettent de regarder de plus près en affichant le numéro de ligne, les noms de zone et l’étendue des lignes. Ceci est utile lors de la conception.

Cartes simples avec disposition en grille CSS

Si vous êtes nouveau dans CSS Grid, vous devriez revoir les bases et les fonctionnalités Créer une disposition de grille CSS simple. Les cartes sont un excellent moyen d’afficher du contenu, ainsi qu’un élément d’interface utilisateur intéressant et intuitif à utiliser. Ils constituent un excellent format pour que les utilisateurs puissent analyser rapidement le contenu et se concentrer sur ce qui les intéresse le plus. Les cartes permettent également aux concepteurs de mettre en forme le contenu d’une manière visuellement attrayante avec de superbes images, du contenu d’introduction et des liens.

Cartes et mise en page générale

En dehors de cela, il est important de savoir que la grille CSS n’a pas à être utilisée pour une mise en page entière. Les grilles peuvent être utilisées dans des zones spécifiques de la page si nécessaire. Puisqu’il s’agit d’un tutoriel sur les mises en page de cartes, nous ne pouvons utiliser ici qu’une approche par grille, même si le reste de la page n’utilise pas de grille CSS. Tant que la zone de grille est définie et display: grid; Si elle est déclarée sur le wrapper, cette approche peut être utilisée.

Lorsque vous travaillez avec un nombre défini de cartes

Dans certains cas, il est facile de programmer un nombre défini de cartes. Avec une quantité fixe de contenu, le nombre de cartes reste le même. Par exemple, il peut y avoir quatre cartes expliquant les offres commerciales, chaque offre étant sur sa propre carte.

Disposition par mise en page de carte de volant d'inertie Disposition de grille CSS Comment faire un didacticiel sur quatre rangées de cartes

Pour cet exemple (et les autres), tous sont .card Les objets sont en un .cards Élément de conteneur. Pour ce faire, c’est assez simple.

.cards {

display: grid;

grid-template-columns: repeat(3, 1fr);

grid-auto-rows: auto;

grid-gap: 1rem;

}

 

.card {

border: 2px solid #e7e7e7;

border-radius: 4px;

padding: .5rem;

}

Il est important d’afficher la valeur de .cards râper. Sans cela, les zones de grille ne peuvent pas être créées. L’étape suivante consiste à définir le grid-template-columns et choisissez le style. Le style réel de la carte est déclaré avec une classe de .card.

Mise en page par mise en page de carte de volant d'inertie Mise en page de grille CSS Comment créer des classes de carte Tutoriel

Cet exemple montre plusieurs balises d’article avec la classe de .card. Cherchez-le Codepen.

Répétez ce processus pour le nombre de cartes spécifié

C’est là que les cartes prennent forme. La répétition est utilisée avec le pour créer un nombre fluide de colonnes par ligne repeat() Une fonction. Cette fonction prend deux arguments: le nombre de valeurs à répéter et le nombre de valeurs à répéter.

Mise en page par mise en page de carte de volant d'inertie Mise en page de grille CSS Comment faire un didacticiel sur trois rangées de cartes

Par example, grid-template-columns: repeat(3, 200px); calculé à grid-template-columns: 200px 200px 200px;.

Unité fractionnaire

Vous verrez que l’exemple de code utilise un « fr ». C’est quoi exactement? Cette unité de mesure est devenue populaire avec CSS Grid. Fr signifie « unité cassée » et 1fr occupe 1 partie de l’espace disponible. Cela simplifie le calcul de la pièce.

Les unités fractionnaires peuvent être utilisées seules, ou vous pouvez spécifier une largeur de 1fr Vous pouvez également ajouter des enfants. Plusieurs frs sont partagés de manière égale par tous les éléments enfants.

Mise en page par mise en page de carte de volant d'inertie Mise en page de grille CSS Comment faire un didacticiel de groupe FR

Différentes unités fractionnaires peuvent être spécifiées. Par exemple, s’il y a des colonnes de grille 1fr 2fr 1frDeux unités de fracture occupent deux fois plus d’espace qu’une unité de fracture.

Disposition par mise en page de la carte au volant Mise en page de la grille CSS Comment didacticiel mixte pour le groupe

Répétez ce processus pour un nombre dynamique de cartes

Dans certains cas, vous ne connaissez peut-être pas le nombre de cartes dont vous avez besoin, de sorte que la planification d’un nombre fixe ne fonctionnera pas. La même approche est utilisée que pour la répétition, mais il existe une option pour en remplir automatiquement autant que nécessaire.

grid-template-columns: repeat(auto-fill, 250px);

Des spécifications de largeur sont également requises auto-fill. Notez que s’il y a une valeur px, il peut y avoir un espace sur la droite s’il n’y a pas assez de place pour la carte. Cependant, ce n’est pas nécessaire, comme vous le verrez plus tard.

Mise en page par mise en page de carte de volant d'inertie Mise en page de grille CSS Comment faire une série de cartes avec l'espace Tutoriel

Minmax pour plus de contrôle sur la largeur de la carte

Minmax est la solution parfaite car une unité cassée ferait des cartes pleine largeur par elle-même. Ajouter à la fois Répétition et Minmax à la déclaration de style supprimera l’espace vide possible et rendra les cartes plus fluides.

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
Disposition par disposition de carte de volant d'inertie Disposition de grille CSS Comment créer trois cartes pleine largeur Tutoriel
Cette déclaration demande au navigateur d’ajuster autant de colonnes que possible en fonction des tailles spécifiées dans la syntaxe d’itération.

Les colonnes s’inscrivent toujours dans la grille et les cartes ont une taille d’au moins 200 pixels. Si l’espace minimum ne correspond pas parfaitement à la pièce, c’est là que la largeur maximale entre en jeu. Si une autre carte d’une largeur de 200 pixels ne rentre pas, les autres cartes sont plus grandes que 200 pixels. Ainsi, il s’étendra pour remplir la ligne avec plus d’espace et il sera uniformément réparti.

Téléphone portable, téléphone portable

Avec les cartes les plus petites et les plus grandes prévues, c’est le bon moment pour commencer à parler d’appareils mobiles. Les cartes fonctionnent bien sur les appareils de plus en plus petits, car le contenu est en morceaux digestibles et les cartes peuvent être facilement mises à l’échelle. CSS Grid permet de créer une excellente expérience mobile. Dans certains cas, c’est beaucoup plus facile que de faire une requête multimédia distincte.

Dans cet exemple, les cartes doivent être réduites pour s’adapter aux appareils mobiles et augmentées en taille à une fraction de l’espace disponible pour afficher en pleine largeur sur un appareil plus petit. Aucune requête média distincte n’est requise:

grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

La largeur minimale de la carte est de 300 pixels. Autant de cartes 300px sont affichées dans la ligne qui correspondent. Si l’appareil est très petit, il y a de fortes chances qu’il n’y ait pas assez d’espace pour deux cartes d’affilée. C’est alors que le 1fr entrez dans le jeu. L’unité fractionnaire est idéale pour les conceptions réactives. Si deux des cartes 300px ne correspondent pas, la vue mobile devient très claire ici. Lorsque 1fr Si la largeur maximale est spécifiée, une seule carte occupe tout l’espace disponible et est empilée les unes sur les autres.

Disposition de la disposition de la carte au volant Guide de disposition de la grille CSS pour la disposition de la carte pour plusieurs appareils

Écart de treillis

Une fois que la largeur des cartes a été déterminée, la décision doit être prise pour avoir un espace entre elles. Cette propriété est disponible pour les conteneurs maillés et facilite la création de gouttières dans la conception. Grid-column-gap crée l’espace entre chaque carte. Quand tu vois grid-gap, qui fait référence à l’abréviation de grid-row-gap et grid-column-gap. Grid-row-gap est l’espace au-dessus et en dessous de la carte, grid-column-gap est l’espace à gauche et à droite de la carte.

Ressources de mise en page de grille CSS

Les mises en page de grille CSS sont relativement nouvelles dans la conception Web. Il y a beaucoup à apprendre et de nombreuses options. La meilleure façon d’en savoir plus sur la disposition de la grille CSS est de lire des informations supplémentaires et d’expérimenter. Il existe de nombreuses ressources intéressantes, mais en voici quelques-unes pour vous aider à démarrer:


Les développeurs de plugins WordPress l’adorent

Trouver le plugin WordPress parfait qui accélère le développement du site, c’est un peu comme essayer de trouver cette seule faute de frappe dans une chaîne de code – cela peut prendre un certain temps. Et ces jours-ci, il y a tellement de plugins pour différentes tâches qu’il peut être difficile de déterminer exactement quelles fonctionnalités un site a besoin (ou pas) et quels plugins le fournissent de manière efficace.

Téléchargez cet eBook pour obtenir une liste de nos plugins les plus recommandés pour les développeurs! Nous avons trouvé que tous ces plugins étaient simples à utiliser, pas trop puissants sur votre site Web et tout simplement totalement fiables.

Prêt à installer votre nouveau plugin préféré? Plongeons-nous!


Prêt pour un autre tutoriel CSS? Regarde ça!



Source link

Recent Posts