Article du 27 mai 2020

CSS Grid ou comment avoir un site qui ne ressemble à aucun autre

7 min

Lasse de construire des sites internet qui finissent tous plus ou moins par se ressembler, nous nous sommes sérieusement intéressés à une nouvelle méthode pour élaborer leur design : le CSS Grid.
Grossièrement, il s’agit de construire une grille, puis, sur le principe d’un touché-coulé, de dicter aux éléments leur position sur cette grille.
Cette méthode de placement nous permet de créer facilement de nombreuses mises en page qui n’étaient, jusque-là, pas ou difficilement possibles.
Les éléments peuvent par exemple se chevaucher ou être placer comme des éléments en position absolue sans grandes difficultés.

Et sur mobile ça donne quoi ?

Là où le grid gagne ses lettres de noblesse, c’est dans la construction du responsive webdesign car, si cela vous avait échappé, nous naviguons principalement sur le web via nos smartphones.
Fini, les blocks simplement positionnés les uns en dessous des autres ! Fini, les histoires de marges négatives ! Fini, les positions absolues ! Maintenant, il est possible, même en responsive, d’avoir des chevauchements et de rythmer les pages sans trop de difficulté. Plus besoin de jouer avec des histoires de marges négatives ou des positions absolues, qui nécessitent parfois d’être conditionnées en fonction du device sur le quel l’utilisateur va consulter le site.
Très récemment utilisé pour le site « Les Boutiques du Patrimoine », notre client a directement validé le webdesign de la vue desktop. Pourtant, sans nous en faire part, celui-ci s’est tout de même interrogé sur l’aspect qu’aurait le site une fois sur mobile.
A la livraison du site, ses doutes quant au design mobile se sont envolés. Le rythme de la vue desktop était le même sur mobile, les blocks se suivaient tout en se chevauchant et le design de son site gardait son aspect originel quel que soit le device. Merci CSS Grid

Et si j’utilise Internet Explorer ?

Un autre aspect intéressant du CSS Grid, et pas des moindres, est qu’il est aujourd’hui compatible avec tous les navigateurs, y compris Internet Explorer à partir de la version 10. N’oublions pas les utilisateurs d’Internet Explorer car, croyez-le ou non, il y en a encore !
Nous ne saurions que vous recommander d’utiliser Firefox pour un rendu optimum de votre site, notamment pour les couleurs, mais libre à chacun d’utiliser le navigateur de son choix 😉

Et le Flex alors ?

Le Grid ne faisant pas tout, nous continuons de développer en le couplant avec la fidèle et éprouvée méthode du Flex.
Les deux vont de pair pour un résultat impeccable.
Alors ? Vous prendrez bien un petit peu de Grid pour votre prochaine refonte ?
Contactez-nous .