Utiliser les grilles CSS (CSS3)

Bonjour,
cet article n'a pas vocation de vous apprendre tout sur les grilles CSS mais de vous ouvrir des pistes vers cette façon d'aborder le web-design.
Tout d'abord rappelons ce qu'est le CSS.

CSS pour Cascading Style Sheets (Feuilles de style en cascade)
Le CSS est un langage qui permet de mettre en forme le contenu et le design de pages écrites en HTML.
Le CSS permet de modifier les polices, la couleur, la taille et l'espacement du contenu notamment.

Le CSS Grid layout (modèle de disposition en grille ou CSS3) est un modèle de spécification CSS qui permet de créer des mises en page en divisant l'espace d'affichage en régions utilisables par une application ou en définissant des relations de taille, position et d'empilement entre les éléments HTML.

Comme les tableaux, la grille permet d'aligner des éléments sous forme de colonnes et de lignes mais à la différence des tableaux, la grille n'a pas de structure de contenu. Ainsi, on peut créer de nombreuses mises en page qui n'auraient pas été possibles avec les tableaux. Ainsi, les éléments fils d'un conteneur en grille peuvent être positionnés afin qu'ils se chevauchent ou qu'ils se comportent comme des éléments positionnés.

Le système est responsive, c'est à dire que le design va s'adapter à la taille du media.












Ressources en français :
Grilles CSS
CSS Grid Layout - Matthieu Anceret

Ressources en anglais :
Tutorial en 10 étapdes : Introduction to CSS layout
How to create a simple layout with CSS Grid Layouts
Vidéo très claire de 30mn sur le sujet et le support

Outils indispensables :
Navigateur Firefox Developer Edition
Editeur en ligne HTML / CSS / JS CodePen


J'espère avoir suscité votre curiosité et votre intérêt.
Nous pouvons nous retrouver dans les sujets de forum liés aux thèmes afin d'entamer des échanges et contribuer ensemble à de nouveaux thèmes pour XOOPS.