CSS Grid layout

CSS Grid layout, une grille révolutionnaire pour les webdesigners

Les webdesigners vont adorer le module CSS Grid layout. Il va leur faciliter la création des mises en page d’un site web. Beaucoup plus flexible que Flex, il gère les deux dimensions et la position des éléments enfants avec précision. Les navigateurs commencent depuis peu à l’adopter.

Jusqu’alors les webdesigners connaissaient les tableaux, les floats, flex. Désormais ils vont adorer Grid layout, une spécification du W3C, qui permet de mettre en page facilement les éléments d’un site Web. Contrairement à flex, Grid layout gère les deux dimensions et permet de positionner les éléments enfants avec précision, un atout pour créer de beaux design web.

Nous retrouvons la logique des tableaux, colonnes et lignes, mais nous n’avons plus besoin d’HTML. La page est divisée en zones.
Et pour mieux comprendre voici deux exemples simples, vus sur le site alsacréation.com

CSS Grid layout

CSS Grid layout

Exemples de mises en page avec le module Grid layout visibles sur le site de labs.jensimmons.com

CSS Grid layout

CSS Grid layout

Sources :

developer.mozilla.org : Grilles CSS (CSS Grid)
alsacreations.com : CSS3 Grid Layout
w3.org : CSS Grid Layout Module Level 1

Auteur : Denis ALLARD

Denis ALLARD
Rédacteur Web sur le blog studiovitamine depuis 2009, j'ai pu mesurer l'évolution fulgurante du web, des nouvelles technologies, du e-commerce... Quand je n'écris pas pour le web, je me consacre à l'ergonomie, au référencement naturel et à la formation universitaire des futurs concepteurs de sites...

Commentaires Facebook

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *