Lorsque vous créez une application Web, l'une des premières choses dont vous avez besoin est un moyen de mettre en page le contenu de votre application.
De nombreux concepteurs utilisent des grilles imaginaires pour mettre en page du contenu, que ce soit pour un site ou une application. Le groupe CSS s'est efforcé de faciliter la mise en page et a ainsi créé le module de mise en page en grille CSS, qui commence à apparaître dans les navigateurs.
Vous pouvez tester cette fonctionnalité dans Chrome à l'aide d'un flag expérimental. Il est également implémenté dans IE depuis la version 10 et devrait bientôt être disponible dans la plupart des navigateurs.
Synthèse
- La mise en page CSS Grid 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 des contenus peut être indépendant de l'ordre d'affichage du conteneur de grille
- Les mises en page peuvent changer en fonction des requêtes multimédias, ce qui facilite le responsive design.
- Le contenu peut se chevaucher (ce qui permet 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 CSS Grid (les diapositives sont ici:
Essayer
L'utilisation de la mise en page CSS Grid dans Chrome est désormais simple. Pour commencer, vous devez activer le flag expérimental afin d'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 Enable (Activer) pour activer le flag. Une invite vous demandant de redémarrer le navigateur s'affiche alors:
Il vous suffit maintenant de cliquer sur le bouton Relancer maintenant pour redémarrer votre navigateur. Vous pourrez alors tester la mise en page en grille CSS.
Donnez-nous votre avis
La mise en page en grille CSS est une excellente nouvelle primitive pour les contenus Web, mais comme d'habitude, nous sommes tous impatients de connaître l'avis des développeurs à son sujet. Il existe de nombreuses façons de nous faire part de vos commentaires : laissez un commentaire ici, envoyez un e-mail à la liste de diffusion du groupe de travail CSS du W3C en indiquant "[css-grid]" dans l'objet, signalez des bugs ou écrivez un article de blog et tweetez votre avis. Nous avons hâte de découvrir les superbes mises en page que vous créerez avec cette nouvelle fonctionnalité très utile.