<page xmlns="http://projectmallard.org/1.0/"
      type="topic" id="misc-grid" xml:lang="fr">

<info>
  <revision docversion="0.1" date="2016-05-14" status="draft"/>
  <credit type="author">
    <name>Frédéric Péters</name>
    <email>fpeters@entrouvert.com</email>
  </credit>

</info>

<title>Système de grille CSS</title>

<p>
Un système de grille adaptive sur douze colonnes est proposé pour le
formatage des formulaires.
</p>

<figure>
  <title>Système de grille</title>
  <media type="image" mime="image/png" src="figures/grid.png"/>
</figure>

<p>
Chaque classe CSS pour un élément de la grille est décrit numériquement
par sa largeur.  Par exemple, <code>grid-1-2</code> pour un élément
faisant la moitié de la largeur, <code>grid-2-3</code> pour un élément
en faisant les deux-tiers.  Les dénominateurs possibles sont 2, 3, 4, 6
et 12.
</p>

<note>
<p>
Sur des écrans de petite dimension, la grille est automatiquement adaptée pour
ne pas rétrécir outre mesure les éléments, la largeur de ceux-ci est doublée,
par exemple un élément configuré pour une largeur d'un quart d'écran prendra
non pas un quart d'écran mais un demi écran.
</p>

<p>
Sur les très petits écrans, la mécanique de grille est totalement annulée et
tous les éléments de grille sont affichés sur toute la largeur disponible.
Il est cependant possible d'empêcher ce comportement en accompagnant la classe
<code>grid-x-y</code> de la classe <code>never-alone</code>.
</p>
</note>

<p>
Pour forcer un retour en début de ligne, ou pour assurer un rendu correct
quand les éléments d'une ligne n'ont pas tous la même hauteur, une classe
supplémentaire, <code>newline</code> peut être posée sur le premier
élément de la nouvelle ligne.
</p>

</page>
