CSS Grid est une méthode de plus en plus utilisée pour créer des mises en page complexes de conception Web réactives qui affichent un rendu plus cohérent sur les navigateurs. Le moment est venu de vous familiariser avec CSS Grid. Nous avons donc rassemblé 13 des meilleurs moyens de commencer à apprendre dès aujourd'hui.
Plutôt que des méthodes classiques telles que les tables ou le modèle de boîte, CSS Grid vous permet de créer des présentations plus asymétriques et un code plus normalisé compatible avec plusieurs navigateurs. La plupart des principaux navigateurs de sites Web prennent déjà en charge CSS Grid et il s’agit d’une recommandation du W3C à l’intention des candidats, ce qui la formaliserait en tant que pratique standard. Il est largement admis que CSS Grid sera l’avenir des mises en page de sites Web.
1. MDN: CSS Grid Layout
Mozilla dispose d'excellentes ressources dans les guides Web MDN de MDN, offrant une explication simple du fonctionnement et des exemples de code pour vous aider à démarrer.
Voici ce que MDN dit à propos de la grille CSS:
CSS Grid Layout est idéal pour diviser une page en régions principales ou pour définir la relation en termes de taille, de position et de calque entre des parties d'un contrôle construit à partir de primitives HTML.
Comme les tableaux, la disposition en grille permet à l'auteur d'aligner des éléments en colonnes et en lignes. Cependant, beaucoup plus de mises en page sont possibles ou plus faciles avec la grille CSS qu'avec les tableaux. Par exemple, les éléments enfants d'un conteneur de grille peuvent se positionner de manière à ce qu'ils se chevauchent et se superposent, de la même manière que les éléments positionnés par CSS.
La documentation propose du code, des exemples et des éléments que vous pouvez ouvrir et utiliser vous-même dans CodePen ou JSFiddle. Cela pourrait être le meilleur point de départ en termes de réflexion sur la grille CSS.
2. Apprendre la grille CSS
Learn CSS Grid est un guide pour apprendre la technique de Jonathan Suh, basé sur la méthode dans laquelle il l'a apprise. Le guide est bien organisé et commence par une table des matières qui vous permet de passer d’une section à l’autre.
Ce guide est facile à suivre - certaines connaissances en codage sont requises - et constitue une excellente ressource pour les débutants en grille CSS. Chaque élément est accompagné d'un exemple visuel, qui pourrait être l'élément clé pour rassembler toutes les informations.
3. Tuts + Guide des grilles CSS
Tuts + a créé un guide complet pour vous aider à apprendre CSS Grid, que vous commenciez à vous familiariser avec les bases ou que vous souhaitiez explorer des CSS plus avancées. Cela se fait à travers une série de tutoriels clairs et approfondis, avec des exemples pratiques tout au long.
4. Codeacademy: Introduction aux grilles
Codeacademy est depuis longtemps l'un des meilleurs endroits pour acquérir des compétences de codage dans un format pratique. Bien que vous deviez créer un compte pour accéder aux tutoriels, il s'agit d'un excellent moyen d'apprendre à utiliser un format basé sur un plan de cours.
Voici la description du cours d'introduction aux grilles:
Dans cette leçon, nous présentons un nouvel outil puissant appelé grille CSS. La grille peut être utilisée pour mettre en page des pages Web entières. Alors que Flexbox est principalement utile pour positionner des éléments dans une mise en page unidimensionnelle, la grille CSS est plus utile pour des mises en page en deux dimensions, offrant de nombreux outils pour aligner et déplacer des éléments sur les deux lignes et colonnes.
Le cours Codeacademy peut être suivi en séquence - commencez au tout début si vous êtes totalement novice dans la conception Web backend - ou seul. C'est gratuit de créer un compte et de suivre de nombreux cours.
5. FreeCodeCamp: Apprendre la grille CSS en 5 minutes
Obtenez ce qu'est la grille CSS et ne disposez que de quelques minutes pour vraiment vous y plonger? Ce tutoriel de démarrage rapide de FreeCodeCamp vous aidera à vous familiariser avec ce logiciel en seulement cinq minutes. (D'accord, vous devez déjà connaître quelques bases.)
Voici les plats à emporter: Les deux ingrédients essentiels d’une grille CSS sont l’emballage (parent) et les éléments (enfants). Le wrapper est la grille réelle et les éléments sont le contenu à l'intérieur de la grille.
Le guide de 5 minutes comprend également des balises pertinentes.
6. L'atelier de mise en page CSS
L’atelier CSS Layout est un ensemble de cours rémunérés dispensés par Rachel Andrew, l’un des chefs de file du travail sur grille CSS. Les cours sont un programme d’autoapprentissage en ligne, idéal pour apprendre plus de structure et pour apprendre quelque chose de nouveau.
Pour voir si ce cours vous convient, la première partie est gratuite. Il se concentre sur les bases de CSS et explique toutes les bases dont vous avez besoin pour approfondir le matériel. La bonne chose à propos de l'ensemble complet des cours est qu'il n'y a pas de coûts supplémentaires; vous avez juste besoin d’un navigateur Web et d’un éditeur de texte pour commencer.
7. Jeu: Grid Garden
Grid Garden est un jeu qui utilise CSS pour développer un jardin de carottes réussi. C’est une bonne introduction au fonctionnement des propriétés CSS pour vous permettre de penser correctement à la grille CSS.
Et bien, c'est très amusant. Voyez si vous pouvez le faire à travers les 28 niveaux.
8. Grille par exemple
Grille par exemple montre comment les différentes configurations de grille CSS apparaîtront dans les navigateurs pris en charge. Chaque configuration de grille comprend un exemple visuel avec des liens vers des pages contenant davantage d'informations sur la technique et le code.
Il existe également un bonus amusant avec les mises en page factices afin que vous puissiez voir à quoi ressemblent différents exemples de grille CSS avec du contenu réel qui leur est appliqué.
9. Vidéo: Apprendre la grille CSS
Si apprendre en voyant quelqu'un faire quelque chose est plus votre allée, regardez la vidéo Apprendre la grille CSS. (Il a également un texte d'accompagnement.)
La vidéo de 18 minutes est un didacticiel de démarrage plus rapide qui, espérons-le, facilitera votre désir d'explorer tout le potentiel de la grille CSS.
La vidéo vous explique comment configurer un projet, définir le code HTML, définir des règles de base, définir des grilles, imbriquer la grille CSS et les zones de modèles, ainsi que quelques astuces réactives. La vidéo et le texte incluent des captures d'écran de tout le balisage.
10. Astuces CSS: Un guide complet de la grille
CSS-Tricks est depuis longtemps l’un des lieux privilégiés pour apprendre le codage. Le guide complet de la grille ne fait pas exception.Le guide, publié en novembre 2017, est une introduction au système 2D à jour.
Ce guide est fantastique et divisé en sections digestibles.
Mais la meilleure partie pourrait être la galerie de la grille CSS en action. Assurez-vous de passer du temps dans la galerie pour vous inspirer.
11. CSS Grid Demandez-moi n'importe quoi
Vous avez des questions sur la grille CSS? Demandez à un expert.
Ce Git comprend des questions simples et des réponses de Rachel Andrew. Bien qu'elle ne réponde qu'aux questions réduites, cela reste néanmoins très utile. Assurez-vous simplement de suivre les règles de base.
12. Vidéo: faire progresser nos mises en page
Jen Simmons partage son discours de la conférence Enhance 2016 pour les utilisateurs. La vidéo de 30 minutes présente des exemples de grille CSS en action et explique comment écrire du code en période de transition.
Regardez la vidéo et vous pourrez également consulter le diaporama. La paire est très utile pour réfléchir à la grille CSS en termes plus généraux.
13. Terrain de jeu CSS Grid
Prêt à tester toutes ces idées et compétences en matière de grille CSS? Le CSS Grid Playground inclut les emplacements des conteneurs et des éléments de la grille pour vous permettre de commencer à coder et de voir ce qui se passe en temps réel.
C'est un bon moyen de se familiariser avec les bases et de voir les changements à mesure que vous les apportez. (Cela ressemble presque à un jeu.)
Conclusion
Arrêtez de tergiverser si vous ne vous êtes pas lancé au moins en vous familiarisant avec la grille CSS. Donnez-vous pour objectif de vous familiariser avec les meilleures pratiques afin de mieux comprendre son fonctionnement et son utilisation.
Voici un message à toutes les personnes qui fournissent d'excellentes ressources sur la grille CSS. Il faut admettre que la communauté de la conception et du développement de sites Web est assez étonnante pour le partage des connaissances. Si vous utilisez l'une de ces leçons ou tutoriels et en retirez un bénéfice, assurez-vous de partager l'amour avec l'auteur et laissez-le savoir s'il vous a aidé.