Nous contacter

  1. Accueil
  2. Blog
  3. Webdesign
  4. Découvrez le module CSS3 grid layout grâce au jeu CSS Grid Garden !

Découvrez le module CSS3 grid layout grâce au jeu CSS Grid Garden !

Le 13/04/2017

Dans Webdesign

Le Grid layout étant maintenant supporté par la plupart des navigateurs, il est temps de se pencher dessus et de façon ludique !

Avant de commencer qu'est-ce que Grid layout ?

Grid layout est un module CSS3 permettant de composer ses pages web sous forme de grille. Pour les vieux de la vieille (et ceux qui ont déjà intégré des templates emails), cela va vous rappeler de bons souvenirs de la période IE6 et du fonctionnement avec des balises "table", les méthodes de placement et même certaines propriétés CSS sont identiques.

See the Pen CSS Grid Layout with @support flexbox fallback by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

La grosse différence tout de même est qu'ici, pas besoin d'intégrer en HTML, les structures se font uniquement en CSS, ce qui permet de rester sémantique et responsive-friendly.

Cette spécification date de 2004 et n'avait jamais eu un support très étendu jusqu'à maintenant, mais les fournisseurs de navigateurs ont dû décider de changer cela ! Firefox, Google Chrome, Safari et Opéra ont tous activé le support par défaut en mars 2017. Il est donc grand temps d'apprendre à l'utiliser !

Découvrir grid layout avec le jeu CSS Grid Garden !

Css grid garden est un petit jeu ludique réalisé par les mêmes créateurs que flexboxfroggy.com que nous avons déjà partagé sur ce blog, mais centré sur l'utilisation de grid layout. 

En une grosse demi-heure, ce site vous aura fait découvrir la technologie grid layout dans les détails et par des exemples amusants. Vous pourrez ensuite enchaîner sereinement sur un tutoriel plus complet ou même un petit projet de test, ou tout simplement faire vote jardin désormais !

Bonne découverte et bon jeu sur cssgridgarden.com.