Formation CSS Grid Layout

Tirez parti de toutes les nouveautés apportées par cette spécification CSS3 révolutionnaire pour construire des gabarits, des grilles de mise en page, voire des applications web entières en quelques lignes de code.

Complémentaire de Flexbox, le module de positionnement Grid Layout est une spécification du W3C à l’état de Candidate Recommandation dont les premiers jets datent de 2004. Désormais exploitable en production sur l’ensemble des navigateurs, le concept général de Grid Layout (ou « positionnement en grille ») est de structurer l’espace en zones majeures, au sein d’une page web ou d’une application.
Une grille virtuelle, indépendante des éléments HTML qui peuvent s’y placer, présente l’avantage flagrant d’être très souple lorsqu’on souhaite la modifier en fonction du contexte.

Vous apprendrez au cours de cette formation :

  • à redécouvrir du HTML et du CSS dépourvus de bidouilles et code inutile,
  • à maîtriser le Responsive grâce à la capacité de Grid Layout à s'adapter immédiatement aux différentes tailles d'écran,
  • à gérer de multiples templates (gabarits) de page ou d'application simplement et sans intervenir sur la structure du document,
  • à… réapprendre à aimer CSS !

Concepts généraux

  • Démonstration initiale
  • Une spécification W3C finalisée
  • Grid Container, Grid Item
  • Grid Line, Grid Track, Grid Cell, Grid Area
  • Les propriétés de grille sur le parent
  • Les propriétés de grille sur les enfants

Le Flux dans la grille

  • Grille implicite
  • Grille explicite
  • Propriétés de flux automatique
  • Placement automatique

Unités et valeurs de Grid Layout

  • L'unité "fr"
  • La valeur "auto"
  • La fonction "minmax()"

Placer explicitement

  • Le Placement défini
  • Propriétés de placement défini
  • Les Zones nommées
  • Propriétés de zones nommées
  • Les propriétés raccourcies
  • Les méthodes de fusion de cellules
  • Appliquer des gouttières

Aligner dans Grid Layout

  • Alignement des l'ensemble des cellules
  • Alignement général des Grid Items
  • Alignement individuel d'un Grid Item

Répétition de motifs

  • Fonction repeat()
  • Les valeurs auto-fill et auto-fit
  • La combinaison repeat() + auto-fit + minmax()

Fonctionnalités avancées

  • Modification de l'ordre d'affichage
  • Superposition d'éléments
  • Valeurs négatives de Grid Line
  • Construction d'un template responsive

Support de Grid Layout

  • Tableau de support navigateurs
  • Ressources : Grid Polyfill et Gridbugs
  • Amélioration progressive
  • Le "cas" IE
  • Les stratégies de mise en production

Public

Cette formation à CSS3 Grid Layout est destinée aux webdesigners et intégrateurs avancés ou experts qui souhaitent appréhender et maîtriser en production ce nouveau modèle de positionnement excitant, ainsi qu'aux développeurs et chefs de projet Web qui s’interrogent sur les possibilités offertes par CSS en termes de design d’interfaces.

Objectifs

À la fin de la formation, vous êtes capable de concevoir des pages et applications web avec Grid Layout.

Prérequis

Être familier avec HTML, CSS et bien connaître les notions de base de positionnement CSS (float, position absolute, inline-block, Flexbox)

Moyens pédagogiques

Dans le cas de sessions inter-entreprises, à Strasbourg ou à Paris, la formation est dispensée dans les salles pédagogiques adaptées à des apprentissages informatiques : capacité de 1 à 8 personnes, équipement informatique fourni pour chacun des stagiaires, vidéo-projecteur et paperboard.

Suivi et appréciation des résultats

L'exécution physique de l'action de formation est suivie à l'aide de feuilles de présence émargées par demi-journée par les stagiaires et le formateur. Sanction : attestation de fin de stage.

Besoin d'un financement ?

Une formation est un investissement, pour mieux vous permettre de vous former, des possibilités de financement vous sont proposées.

Voir les différents financements

Avant cette formation, préparez-vous avec :

À la suite de cette formation, nous vous recommandons :

Envie de connaître la date
de nos prochaines formations ?

Calendrier des formations

Nous contacter

Téléphone : 09 54 96 50 50 Adresse e-mail : contact alsacreations point fr

Alsacréations
10 Place du Temple Neuf
67000 Strasbourg, France