• A la une
  • Catégories
  • Dossiers
  • +

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

par Vincent Ginetle 13/04/2017

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 ça 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.

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.

CSS_Grid_Layout

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 !

css-grid

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

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

  • Partager l'article en 1 clic !

    N'hésitez pas à aider le BlogDuWebdesign
Avatar_thumbAuteur : Vincent voir son blog

Passionné par le Web, les Arts Graphiques et les installations numériques, je travaille actuellement dans l'agence Dezup que nous avons créé avec l'équipe du BlogDuWebdesign.

Devenez membre !

Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus

Créer mon compte
twitter birdtwitter birdtwitter birdtwitter birdtwitter bird
twitter bird
Ouvrir