Flexbox et Grid Layout : les nouvelles techniques de mise en page du web !

par Thomas MARCOUX le 6 mars 2018

Le web est un univers en perpétuelle expansion mettant aujourd’hui en lumière de nouvelles perspectives de mise en page. Flexbox et Grid Layout sont les deux principales techniques CSS qui révolutionnent la manière de diviser l’espace d’une page ou d’une application web. Le Cepegra vous propose deux nouvelles formations d’un jour afin de les découvrir ou les approfondir.

Dans un monde de plus en plus mobile, nos pages web doivent effectuer de véritables exercices de gymnastique pour s’adapter aux différentes utilisations. Nos nouvelles habitudes de consommation de l’Internet poussent les développeurs web à trouver des solutions afin de créer des sites souples et élastiques.

Impossible de se passer des richesses de Flexbox en 2018 quand on crée des sites « Responsive » à la fois modulables et flexibles. Grid Layout se joint à la partie pour étendre les possibilités.

Flexbox, l’ère de l’Internet flexible

Introduit à l’origine en juillet 2009, Flexbox n’est pas très récent mais il a fallu patienter quelques années pour que le module soit adopté et puisse être utilisé en production. Il résout bon nombre de problèmes récurrents avec une simplicité déconcertante. On en oublierait les positionnements flottants (float) et les affichages de type inline-block. Le centrage vertical devient enfin possible !

En pratique, on définit un conteneur dans lequel les éléments pourront être distribués soit verticalement, soit horizontalement. D’autres options permettent de gérer l’agencement à l’intérieur de celui-ci de façon précise. On peut citer également d’autres avantages tels qu’une hauteur identique et la gestion de l’ordre des éléments au sein du conteneur. N’oublions pas la faculté des éléments enfants de pouvoir occuper l’espace mis à leur disposition, véritable pierre angulaire de la flexibilité.

Cela réduit considérablement le nombre de ligne de code CSS et rend le code beaucoup plus lisible. Le travail se voit considérablement allégé.

Grid Layout, entrez dans une nouvelle dimension !

Grid Layout n’est pas très récent non plus, les prémices datent de 2004. Néanmoins le support de cette nouvelle spécification n’a été adopté qu’à partir de la version 57 de Chrome, la version 52 de Firefox et la version 10.1 de Safari.

Ce qui nous ramène à mars 2017. Il aura fallu attendre encore octobre dernier et la version 16 pour le navigateur Edge de Microsoft. Internet Explorer reste à la traîne et n’adopte pas encore complètement cette technologie.

Pourquoi Grid Layout ?

Si Flexbox offre un vaste choix d’alignements, Grid Layout couvre tous les cas de figure grâce à une grille virtuelle sur laquelle nous allons pouvoir attacher nos éléments. Comme sur un tableau magnétique, nos composants web sont distribués aux positions voulues et pourront être redistribués facilement en fonction de la taille de l’écran d’affichage. Nos pages deviennent agiles !

Une mise en page pour le web

On retrouve des éléments caractéristiques de la mise en page et du travail prépresse, les gouttières font leur apparition et permettent d’espacer les cellules entre elles. Une toute nouvelle unité est introduite : l’unité « fr » qui permet de fractionner l’espace tout en restant flexible. Les grilles pourront avoir un nombre considérable de lignes et de colonnes, une nouvelle notation permettra de répéter la taille de ces lignes et colonnes extrêmement facilement. Les nostalgiques qui avaient l’habitude de travailler avec les tableaux HTML pour leur mise en page, ce qui n’était plus du tout conseillé, retrouveront des références en CSS pour fusionner les cellules dans une ligne ou dans une colonne.

Flexbox ou Grid Layout ?

C’est une question fréquemment posée qui ne devrait pas l’être. Les deux technologies sont complémentaires et ne doivent pas être mises en opposition. Chacune a ses avantages et il faut de la pratique pour comprendre à quel moment telle technologie sera la plus adaptée. On ne peut que se réjouir des nouvelles possibilités offertes par ces nouvelles techniques qui rendront le travail beaucoup plus léger.

De nouveaux pouvoirs impliquent de nouvelles compétences

Aujourd’hui, la conception d’un site Internet n’a plus rien à voir avec celle d’il y a dix ans. Il est nécessaire d’acquérir de nouvelles compétences et une nouvelle manière d’appréhender la construction globale. L’espace au sein d’une page web ou d’une application doit être distribué de façon fluide et homogène. Le contenu doit être malléable pour qu’il puisse s’adapter aux besoins des utilisateurs quel que soit le dispositif utilisé pour le consommer.

Au Cepegra, à travers des workshops, vous allez pouvoir expérimenter ces nouvelles techniques et vous familiariser avec tous les nouveaux concepts liés à celles-ci. Il est temps pour vous d’acquérir de nouveaux pouvoirs et prendre en compte toutes les dimensions qu’offre aujourd’hui le CSS !

Programmes des formations et inscriptions sur :
http://bit.ly/FlexboxWorkshopCepegra
http://bit.ly/GridLayoutWorkshopCepegra

Commentaires fermés sur Flexbox et Grid Layout : les nouvelles techniques de mise en page du web !

Partager >