CSS Grid Layout, les ressources indispensables pour apprendre

Astucecss

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

apprendre haslayout 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. 

CSS Grid Layout, guide complet

CSS grid layout, guide complet

Les concepts de base des grilles CSS

MDN grid layout

CSS3 Grid Layout

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

learn CSS grid

The CoffeeCup Guide to LIBERATING LAYOUT THROUGH CSS GRID

cssgrid.cc

CSS Reference (cheat sheet)

Grid CSS reference

Grid By Example

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

grid multiple ways

Does CSS Grid Replace Flexbox?

does css grid replace flexbox

Replace Bootstrap Layouts with CSS Grid

replace bootstrap with css grid

Case Study: My First Practical CSS Grid Layout

case study 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

codepen grid layout

CSS Grid Garden

css grid garden

Dans la vraie vie

Sachez qu'il existe une page web qui recense les (quelques) sites web réalisés avec Grid Layout.

CSS Grid in production

css grid in production

Polyfill

Pour finir, voici le lien vers le (seul ?) polyfill permettant d'émuler Grid Layout sur les navigateurs anciens tels que IE9.

Grid Layout Polyfill

grid layout polyfill


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.