Grid Layout Cheatsheet (pense-bête)

Outilcss

Publié par le (13639 lectures)

css bonnes pratiques grille pdf memento récapitulatif gridlayout

De plus en plus incontournable, la spécification CSS Grid Layout ouvre de très larges possibilités pour nos intégrations de pages web, en complément à ce qu'offre déjà le très intéressant Flexbox.

De plus en plus de ressources proposent des tutoriels, des cas d'usages voire des jeux permettant de mieux appréhender ce modèle de positionnement encore trop obscur.

Pour vous dépanner au quotidien, Alsacréations vous propose sa Grid Cheatsheet au format PDF, que vous pouvez télécharger à l'adresse kiwi.gg/gridcheat (75 Ko).

Ce memento est composé des sections suivantes :

  • les concepts principaux de Grid Layout (lignes, rangées, cellules, zones)
  • propriétés applicables sur le parent (avec les valeurs par défaut)
  • les propriétés de placement d'éléments (avec les valeurs par défaut)
  • les propriétés de placement automatique et de gouttières
  • les propriétés d'alignements applicables sur le parent et les enfants
  • quelques modèles classiques :  centrage, pied de page en bas, répétitions, grille simple
  • liens vers des ressources incontournables

N'hésitez pas à le télécharger, il est en usage libre (mentions d'Alsacréations recommandée) et à nous faire toute critique ou suggestion à propos de ce document.

Commentaires

Merci :-) (Imprimé et collé au mur :-)

PS. J'aimerais bien acheter une barre vitaminée sauce kiwi... mais je n'ai plus le lien ... :-) :-) :-)

Salut

Concernant "Grid Layout cheatsheet", sujet "grid concepts and example" :

.three {

grid-row: 2/4;

grid-column: 2

}

Il me semble que la section .three est dans la colonne 1, donc :

.three {

grid-row: 2/4;

grid-column: 1

}

Merci pour ce document !

Petite erreur je pense, row-gap et column-gap devraient être grid-row-gap et grid-column-gap.

@Nilav_ : en fait, la spécification Grid évolue sur ce point et les nouvelles propriétés sont/seront officiellement row-gap et column-gap (pour pouvoir être utilisées dans d'autres modèles comme Flexbox par exemple).

@Raphael : Toujours est-il que row-gap et column-gap ne marche ni sur Firefox, ni sur Chrome chez moi. Je n'ai pas essayé en préfixant mais l'intérêt est nul, autant utiliser grid-

Cela dit, c'est cool que cela soit harmonisé avec Flexbox en sachant que c'est déjà ce qui est utilisé aussi pour un column-count (dans le cas de column-gap)

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.