Lorsque vous créez une application Web, vous devez d'abord en disposer un moyen de mettre en page son contenu.
De nombreux graphistes utilisent des grilles imaginaires pour disposer le contenu d'un site ou d'une application. Le groupe CSS s'efforce de simplifier les mises en page, ce qui a donné lieu à la création du CSS Grid Layout Module, qui est désormais disponible dans les navigateurs.
Cette fonctionnalité peut être testée dans Chrome, derrière un indicateur expérimental. Elle est également implémentée dans Internet Explorer depuis la version 10 et devrait bientôt être disponible dans la plupart des navigateurs.
Synthèse
- La mise en page en grille CSS vous permet de définir des lignes et des colonnes pour votre mise en page.
- Les grilles peuvent s'adapter pour utiliser l'espace disponible
- L'ordre du contenu peut être indépendant de l'ordre d'affichage du conteneur de la grille
- Les mises en page peuvent changer en fonction des requêtes média, ce qui facilite le responsive design
- Le contenu peut se chevaucher (activer une mise en page impossible avec d'autres méthodes)
- La mise en page sous forme de grille est rapide
Voici une vidéo de présentation qui explique beaucoup de choses sur le fonctionnement de la mise en page de la grille CSS (ces diapositives:
Essayer
L'utilisation de la mise en page de la grille CSS dans Chrome est désormais facile. Vous devez tout d'abord activer l'indicateur expérimental pour activer la fonctionnalité.
Commencez par charger l'URL chrome://flags, puis faites défiler la page jusqu'à l'option Activer les fonctionnalités expérimentales de la plate-forme Web, comme indiqué ci-dessous:
Il vous suffit de cliquer sur Activer pour activer l'indicateur. Un message de ce type doit s'afficher pour redémarrer le navigateur:
Il vous suffit à présent de cliquer sur le bouton Relancer maintenant pour redémarrer votre navigateur. Vous êtes prêt à essayer la mise en page de grille CSS.
Donnez-nous votre avis
La mise en page en grille CSS est une nouvelle fonctionnalité très utile pour le contenu Web, mais comme d'habitude, nous souhaitons tous savoir ce que les développeurs en pensent. Il existe de nombreuses façons de nous faire part de vos commentaires. Laissez un commentaire ici, envoyez un e-mail à la liste du groupe de travail CSS du W3C en indiquant "[css-grid]" dans l'objet, signalez des bugs ou publiez un message sur votre blog et tweetez ce que vous en pensez. Nous avons hâte de découvrir les superbes mises en page que vous allez créer grâce à cette nouvelle fonctionnalité très utile.