2016-05-13 22:07:59 +02:00
|
|
|
|
<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>
|
|
|
|
|
|
|
2019-02-06 16:21:07 +01:00
|
|
|
|
<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,
|
2023-06-25 16:02:24 +02:00
|
|
|
|
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.
|
2016-05-13 22:07:59 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
|
2019-02-06 16:21:07 +01:00
|
|
|
|
<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.
|
2023-06-25 16:02:24 +02:00
|
|
|
|
Il est cependant possible d’empêcher ce comportement en accompagnant la classe
|
2019-02-06 16:21:07 +01:00
|
|
|
|
<code>grid-x-y</code> de la classe <code>never-alone</code>.
|
|
|
|
|
|
</p>
|
2016-05-13 22:07:59 +02:00
|
|
|
|
</note>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Pour forcer un retour en début de ligne, ou pour assurer un rendu correct
|
2023-06-25 16:02:24 +02:00
|
|
|
|
quand les éléments d’une ligne n’ont pas tous la même hauteur, une classe
|
2016-05-13 22:07:59 +02:00
|
|
|
|
supplémentaire, <code>newline</code> peut être posée sur le premier
|
|
|
|
|
|
élément de la nouvelle ligne.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
</page>
|
