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
Exemples de mises en page avec le module Grid layout visibles sur le site de labs.jensimmons.com
Sources :
> developer.mozilla.org : Grilles CSS (CSS Grid)
> alsacreations.com : CSS3 Grid Layout
> w3.org : CSS Grid Layout Module Level 1