CSS Grid Layout, Les Ressources Indispensables Pour Apprendre

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

CSS3 Grid Layout

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.

Learn CSS Grid

The CoffeeCup Guide to LIBERATING LAYOUT THROUGH CSS GRID

CSS Reference (cheat sheet)

Grid By Example

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).

Démos Grid Layout sur CodePen

CSS Grid Garden

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

Grid Layout Polyfill

Commentaires

autodidactie 08 Juin 2017 à 15h25

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

autodidactie 08 Juin 2017 à 15h26

(…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

autodidactie 08 Juin 2017 à 15h41

(…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

Raphael 08 Juin 2017 à 18h50

Merci autodidactie pour ces quelques ressources (et surtout bravo pour ce beau fichier pense-bête)

autodidactie 16 Juin 2017 à 11h19

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 27 Juin 2017 à 12h11

@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/

autodidactie 27 Juin 2017 à 12h14

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

Markos 29 Septembre 2017 à 09h08

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.

gregoirenoyelle 06 Février 2018 à 07h43

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/

Raphael 06 Février 2018 à 09h42

@gregoirenoyelle : Merci Grégoire, j'ai ajouté ta ressource :)

gregoirenoyelle 07 Février 2018 à 14h46

@raphael Merci à toi en retour pour ce lien. Je finalise la deuxième série plus avancée.

-hamza- 15 Mars 2018 à 10h35

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

-hamza- 15 Mars 2018 à 10h38

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

nagato 21 Août 2018 à 20h45

s'il vous plait j'ai besoin des cours en français

Commenter

Vous devez être inscrit et identifié pour utiliser cette fonction.

Connectez-vous (déjà inscrit)

Identifiant (pseudo) ou e-mail :

Mot de passe :

Oubli de mot de passe ? Pas de panique, on va le retrouver

Pas encore inscrit ? C'est très simple et gratuit.

Dans les cas les plus extrêmes, on se retrouve à chercher une aiguille dans une meute de foin. (Allain Bougrain-Dubourg)

Alsacréations est une communauté dédiée à la conception de sites et applications web de qualité, grâce aux standards W3C, aux feuilles de styles CSS, aux langages HTML et JavaScript, et à l'accessibilité. Réalisé par l'agence web Alsacreations.fr · À propos et mentions légales · Données personnelles

https://www.alsacreations.com/