GridLayout

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

Le module GridLayout est géré grâce au grid layout de CSS. Il permet de créer des mises en page simples et avancées.

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>
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6

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>

 

 

Element 1
Element 2
Element 3
Element 1
Element 2
Element 3

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>
Element 1
Element 2
Element 3
Element 4
Element 5

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>
Element 1
Element 2
Element 3
Element 4
Element 5