GridLayout

Ce module est la nouvelle version du module Grid. Il est actuellement en phase de Beta.

Simple

La classe principale se nomme wpeo-gridlayout.

Définir un nombre d’élément

• grid-1 : Grille de 1 colonne
• grid-2 : Grille de 2 colonnes
• grid-3 : Grille de 3 colonnes
• grid-4 : Grille de 4 colonnes
• grid-5 : Grille de 5 colonnes
• grid-6 : Grille de 6 colonnes

<div class="wpeo-gridlayout grid-3">
	<div>Element 1</div>
	<div>Element 2</div>
	<div>Element 3</div>
	<div>Element 4</div>
	<div>Element 5</div>
	<div>Element 6</div>
</div>

Gouttières

• grid-gap-0 : Pas de gouttière
• grid-gap-1 : Gouttière de 1em
• grid-gap-2 : Gouttière de 2em
• grid-gap-3 : Gouttière de 3em
• grid-gap-4 : Gouttière de 4em
• grid-gap-5 : Gouttière de 5em
• grid-gap-6 : Gouttière de 6em

<div class="wpeo-gridlayout grid-3 grid-gap-1">
	<div>Element 1</div>
	<div>Element 2</div>
	<div>Element 3</div>
</div>
<div class="wpeo-gridlayout grid-3 grid-gap-0">
	<div>Element 1</div>
	<div>Element 2</div>
	<div>Element 3</div>
</div>

Marges

Permet de donner un espace en haut et en bas de la grille.

• grid-margin-0 : Pas de marge
• grid-margin-1 : Marge de 1em
• grid-margin-2 : Marge de 2em
• grid-margin-3 : Marge de 3em
• grid-margin-4 : Marge de 4em
• grid-margin-5 : Marge de 5em
• grid-margin-6 : Marge de 6em

Avancé

Le module permet de créer des mises en page plus complexe en permettant de personnaliser les tailles de chaque élément enfant.

Largeur

• gridw-1 : Grille de 1 colonne (par défaut)
• gridw-2 : Grille de 2 colonnes
• gridw-3 : Grille de 3 colonnes
• gridw-4 : Grille de 4 colonnes
• gridw-5 : Grille de 5 colonnes
• gridw-6 : Grille de 6 colonnes

Note : Prenons l’exemple d’une grille de 3 blocs. Un bloc ne peut pas faire plus de 3 fois sa taille, sinon il sortirait de la grille. Un bloc pourra donc avoir les classes : grid-1 (taille par défaut : 33.333333% dans notre cas), grid-2 (deux fois sa taille : 66.666666%), grid-3 (trois fois sa taille : 100%). Il ne pourra pas avoir les classes grid-4 et plus car il ne peux pas aller au delà de 100%.

<div class="wpeo-gridlayout grid-3 grid-gap-1">
	<div>Element 1</div>
	<div class="gridw-2">Element 2</div>
	<div>Element 3</div>
	<div>Element 4</div>
	<div>Element 5</div>
</div>

Hauteur

• gridh-1 : Grille de 1 lignes (par défaut)
• gridh-2 : Grille de 2 lignes
• gridh-3 : Grille de 3 lignes
• gridh-4 : Grille de 4 lignes
• gridh-5 : Grille de 5 lignes
• gridh-6 : Grille de 6 lignes

<div class="wpeo-gridlayout grid-3 grid-gap-1">
	<div>Element 1</div>
	<div class="gridh-2">Element 2</div>
	<div>Element 3</div>
	<div>Element 4</div>
	<div>Element 5</div>
</div>