CSS Grid Layout, les ressources indispensables pour apprendre

Astucecss

Publié par le , mis à jour le (41172 lectures)

ressources grid grilles

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.

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.

Articles divers

Quelques articles transversaux concernant Grid Layout dans son rapport avec Flexbox ou Bootstrap, ainsi que des cas d'étude concrets.

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.

Commentaires

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.

Commenter

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

Connectez-vous (déjà inscrit)

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

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