Lorsque vous créez une application Web, vous devez avant tout disposer d'un moyen de mettre en page le contenu de votre application.
De nombreux concepteurs utilisent des grilles imaginaires pour organiser le contenu, que ce soit pour un site ou une application. Le groupe CSS a travaillé dur pour faciliter les mises en page et a donc créé le module de mise en page en grille CSS, qui est désormais disponible dans les navigateurs.
Vous pouvez tester cette fonctionnalité dans Chrome avec un drapeau expérimental. Il est également implémenté dans Internet Explorer depuis la version 10 et sera probablement bientôt intégré à la plupart des navigateurs.
Note de synthèse
- La mise en page sous forme de 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 (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 en détail le fonctionnement de la mise en page sous forme de grille CSS (ces diapositives sont disponibles ici:
Essayer
L'utilisation de la mise en page sous forme de grille CSS dans Chrome est désormais un jeu d'enfant. Vous devez 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:
Cliquez simplement sur Enable (Activer) pour activer l'indicateur. Vous devriez voir un message vous invitant à redémarrer le navigateur comme suit:
Il vous suffit à présent de cliquer sur le bouton Relancer maintenant pour redémarrer votre navigateur. Vous serez prêt à essayer la mise en page en grille CSS.
Donnez-nous votre avis
La mise en page sous forme de grille CSS est une nouvelle primitive pour le contenu Web, mais comme d'habitude, nous avons tous envie de savoir ce que les développeurs en pensent. Il existe de nombreuses façons de donner votre avis. 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 les bugs, ou tweetez ce que vous en pensez. Nous sommes impatients de découvrir les superbes mises en page que vous allez créer grâce à cette nouvelle fonctionnalité très utile.