Logo du LYPSO

Cascading Style SheetsGRID LAYOUT

Logo HTML5 et CSS3

Le module CSS Grid layout (modèle de disposition en grille) est un module de la 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.

Application de toute la puissance de Grid

Création d'une mise en page web

Mise en place des zones

Gestion de la hauteur des contenus

Définir un point de rupture

Exercice 1 : Création d'une maquette d'un site responsive

Présentation de l'exercice

Mise en place du HTML

Mise en place de la structure mobile

Mise en place de la structure desktop

Exercice 2 : Création d'un site mobile first

Présentation de l'exercice

Mise en place du HTML

Mise en place de la structure mobile

Mise en place de la structure desktop

Exercice 3 : Création d'un site mobile first

Présentation de l'exercice

Mise en place du HTML

Mise en place de la structure mobile

Mise en place de la structure tablette

Mise en place de la structure desktop

Développement de la zone section

Exercice 4 : Création d'un site desktop first

Présentation de l'exercice

Mise en place du HTML

Mise en place de la structure desktop

Mise en place de la structure mobile

Exercice 5 : Création d'un site desktop first

Présentation de l'exercice

Mise en place du HTML

Mise en place de la structure desktop

Mise en place de la structure tablette

Mise en place de la structure mobile

Exercice 6 : Vision desktop first, vision mobile first

Présentation de l'exercice

Mise en place du HTML

Mise en place de la structure desktop first

Mise en place de la structure desktop first, tablette et mobile

Mise en place de la structure mobile first, tablette et desktop