Cela ne vous aura sans doute pas échappé : ces derniers temps tout le monde parle de Grid Layout, le récent module de positionnement CSS par grilles, aujourd'hui adopté par la plupart des navigateurs.
Et pour cause, combiné à Flexbox le positionnement Grid Layout nous promet de soigner tous les maux et bidouilles de nos intégrations de pages web.
Cette révolution arrive à un rythme inOui et pour ne pas rater le train en marche (huhu), voici quelques ressources incontournables pour bien comprendre les subtilités de ce nouveau positionnement.
En français
Commençons par quelques liens rédigés dans la langue de Molière, où les ressources sont malheureusement assez rares.
Série de tutoriels: Les bases de Grid Layout
CSS Grid Layout, guide complet
Les concepts de base des grilles CSS
Tutoriels et guides
Cette partie regroupe les articles d'apprentissage généraux, les pense-bête et le site de référence (gridbyexample) qui propose tutoriels, vidéos et démos.
The CoffeeCup Guide to liberating layout through CSS Grid
Articles divers
Quelques articles transversaux concernant Grid Layout dans son rapport avec Flexbox ou Bootstrap, ainsi que des cas d'étude concrets.
CSS Grid: One Layout, Multiple Ways
Does CSS Grid Replace Flexbox ?
Replace Bootstrap Layouts with CSS Grid
Case Study: My First Practical CSS Grid Layout
Jeux et démos
Ici c'est la partie ludique où l'on trouve les très nombreux exemples de Codepen ainsi que le jeu CSS Grid Garden (du même auteur que le célèbre Flexbox Froggy).
En production
Sachez qu'il existe une page web qui recense les (quelques) sites web réalisés avec Grid Layout.
CSS grid in production https://cssgrid.design/
Grid Layout Polyfill https://github.com/FremyCompany/css-grid-polyfill
Commentaires
Bonjour,
Merci pour cette copieuse liste de ressources, c'est clairement le moment de s'intéresser aux css grid.
Quelques suggestions pour compléter :
- l'inspecteur de Firefox est bien fichu pour analyser les pages montées en grilles :
https://developer.mozilla.org/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts
- il existe un plugin sublimeText de snippets css grid :
https://github.com/Pushedskydiver/sublime-text-css-grid-snippets
Jean-Luc
(…suite)
- On trouve plusieurs générateurs de grilles permettant de nommer et de régler les zones :
https://codepen.io/anthonydugois/full/RpYBmy
https://github.com/sylvainpolletvillard/postcss-grid-kiss
Jean-Luc
(…suite)
Dans la série en pratique, l'article Alistapart d'Eric Meyer sur la manière de convertir un design existant en css grid : https://alistapart.com/article/practical-grid
Comme pour les flexbox la syntaxe est un peu indigeste au départ, je me suis fait une antiséche : https://fromsmash.com/css-grid
Jean-Luc
Merci autodidactie pour ces quelques ressources (et surtout bravo pour ce beau fichier pense-bête)
Les Css grid en pratique dans SmashingMagazine:
https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/
Etude de cas d'un gabarit de mise en page responsive via css grid et de sa déclinaison sous forme de thème WordPress
@autodidactie :
En éclaireur l'inspecteur de Firefox Nightly va encore plus loin dans l'inspection des css grids. Les nouvelles options permettent un examen plus précis et facilitent l'apprentissages des grilles css.
https://hacks.mozilla.org/2017/06/new-css-grid-layout-panel-in-firefox-nightly/
Convertir une mise en page en css grid via css ? Oui c'est possible. La preuve : un article de Natalya sur Medium et un Codepen pour mieux comprendre
https://medium.com/@tallys/bootstrap-to-css-grid-87b3f5f830e4
D'après le peu que j'ai pu en voir en parcourant rapidement une ou deux ressources que tu cites, ça m'a l'air plus compliqué et moins naturellement responsive que la grille Bootstrap. Je ne sais pas si c'est un progrès. Personnellement, à l'ère du mobile et du responsive, ça me laisse sceptique.
Bonjour,
J'ai commencé une série complète en français sur Grid Layout CSS: Voici la première sur les bases:
https://www.gregoirenoyelle.com/declaration-terminologie-css-grid-layout/
@gregoirenoyelle : Merci Grégoire, j'ai ajouté ta ressource :)
@raphael Merci à toi en retour pour ce lien. Je finalise la deuxième série plus avancée.
Bonjour @Raphael,
J'ai récemment rédigé 2 articles en Français sur CSS Grid Layout :
Créer une mise en page responsive avec CSS Grid Layout :
https://blogs.infinitesquare.com/posts/web/creer-une-mise-en-page-avec-css-grid-layout
Créer un "Layout Switcher" avec CSS Grid Layout :
https://blogs.infinitesquare.com/posts/web/css-grid-layout-creer-un-layout-switcher
Mes articles sont également disponibles sur Medium (la mise en forme est peut-être plus sympa) :
Créer une mise en page responsive avec CSS Grid Layout : https://medium.com/@iqbalhamza/css-grid-layout-creer-une-mise-en-page-responsive-4a6e08b17cf1
Créer un "Layout Switcher" avec CSS Grid Layout : https://medium.com/@iqbalhamza/css-grid-layout-creer-un-layout-switcher-8be4096b0246
s'il vous plait j'ai besoin des cours en français