5 ressources rapides pour maîtriser la présentation en grille CSS

Dans le conseil rapide d'aujourd'hui, je vais vous montrer cinq ressources pour maîtriser la présentation en grille CSS. Plongeons dedans!

 

Une introduction rapide à la grille

Grid Layout est sans doute l’un des développements les plus significatifs pour les développeurs Web depuis la naissance de CSS. Il s’agit d’un système de présentation spécialement conçu pour être utilisé avec des interfaces utilisateur basées sur une grille, ce qui signifie que l’approche standard «flottante» (une sorte de bidouille, soyons honnêtes) n’est plus nécessaire en tant que moyen principal de présenter une page Web.

Le premier brouillon de travail a été publié en 2011 et, croyez-le ou non, nous devons remercier Microsoft pour la majeure partie de son développement; trois des quatre auteurs initiaux faisaient partie de l'équipe Microsoft. Cette version initiale est maintenant obsolète, ayant depuis été remplacée par le module CSS Grid Layout Level 1.

5 ressources pratiques

La prise en charge du navigateur pour Grid est déjà très prometteuse, il est donc grand temps de vous familiariser avec la syntaxe. Voici quelques bonnes ressources pour vous lancer.

Mozilla: Introduction à la disposition en grille CSS

Le premier exemple provient de Mozilla. Son introduction à CSS Grid Layout couvre les bases, mais également des concepts avancés tels que les lignes de dénomination. C’est une ressource complète, mais aussi une présentation magnifique avec une navigation claire, des graphismes attrayants et des stylos avec lesquels vous pouvez jouer et jouer.

learncssgrid.com

Learncssgrid.com de Jonathan Suh est une autre ressource exhaustive. Il explique la théorie sous-jacente à la syntaxe, tout en montrant des exemples des modèles de mise en page les plus courants dont vous pourriez avoir besoin..

Astuces CSS: Un guide complet de la grille

Nous nous rendons ensuite à CSS Tricks pour une excellente ressource de Chris House (dans la vidéo, j’ai par erreur attribué à Chris Coyier des excuses pour cela). Le «Guide complet de la grille» répond exactement à vos attentes. très complet. Il détaille les propriétés des conteneurs et des éléments de la grille dans des colonnes séparées. Excellent travail, comme d'habitude, de CSS Tricks.

Grille par exemple

«Grid by Example» est développé et mis à jour par Rachel Andrew (elle-même membre du groupe de travail pour CSS Grid Layout) et existe depuis assez longtemps. Outre le «guide de mise en route», qui vous donne toutes les informations essentielles sur la spécification, il vous donne de nombreux exemples et des modèles «à saisir» pour les mises en page les plus courantes..

Cours CSS Grid sur les Envato Tuts+

Si vous préférez apprendre par vidéo, je vous recommande fortement (évidemment!) De regarder ces cours de Craig Campbell. Le premier (3 projets CSS Grid pour les concepteurs Web) vous explique trois projets CSS Grid, avec des exemples sur Codepen que vous pouvez utiliser pour vous entraîner et vous entraîner..

3 projets de grille CSS pour les concepteurs Web

Le cours le plus récent de Craig (Bringing CSS Grid Layout et Flexbox Together) explique comment utiliser simultanément deux des modules de mise en page CSS les plus puissants (Grid et Flexbox)..

Rapprochement de la disposition en grille CSS et de la Flexbox

Aller de l'avant et apprendre!

Cette rapide synthèse vous donne un bon départ pour apprendre CSS Grid. Toutes les ressources ici incluent des exemples pratiques que vous pouvez utiliser pour creuser et renforcer la théorie. Je vais vous laisser avec quelques autres tutoriels, mais jusqu'à la prochaine fois heureux d'apprendre!