Grid

Le module de grille est géré avec la propriété CSS Flexbox. Elle permet de créer des mises en pages simples et avancées.

Simple

La classe de base se nomme wpeo-grid. Les classes grid-1, grid-2, grid-3, grid-4, grid-5, grid-6 définissent le nombre d’élément par ligne.

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

Avancé

Le module permet de créer des affichages plus complexe en ajouant des tailles aux blocs enfants.
Par exemple, ajouter la classe grid-2 permettra au bloc de faire 2 fois sa taille. grid-3 lui permettra de faire 3 fois sa taille, etc…

Nous pouvons dire que chaque bloc a, par défaut, la classe grid-1

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

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%.

Padding

  • grid-padding-0 : Pas de padding pour le contenu
  • grid-padding-1 : Padding de 0.2em pour le contenu
  • grid-padding-2 : Padding de 0.5em pour le contenu
  • grid-padding-3 : Padding de 1em pour le contenu