diff --git a/help/fr/figures/grid.png b/help/fr/figures/grid.png
new file mode 100644
index 00000000..313aab22
Binary files /dev/null and b/help/fr/figures/grid.png differ
diff --git a/help/fr/misc-grid.page b/help/fr/misc-grid.page
new file mode 100644
index 00000000..82b9c470
--- /dev/null
+++ b/help/fr/misc-grid.page
@@ -0,0 +1,47 @@
+<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 les petits écrans, les éléments de grille sont affichés sur toute la
+largeur.
+</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>
diff --git a/static/includes/_layout.scss b/static/includes/_layout.scss
index 5460f3eb..4559efcd 100644
--- a/static/includes/_layout.scss
+++ b/static/includes/_layout.scss
@@ -1,5 +1,6 @@
 $width: 1000px !default;
 $mobile-limit: 800px !default;
+$very-small-limit: 480px !default;
 $footer-background: #666666 !default;
 $footer-color: white !default;
 $top-logo-width: 0 !default;
diff --git a/static/includes/_wcs.scss b/static/includes/_wcs.scss
index d32d37d7..db42bbd2 100644
--- a/static/includes/_wcs.scss
+++ b/static/includes/_wcs.scss
@@ -401,7 +401,7 @@ form.quixote div.grid {
 	clear: none;
 }
 
-@for $i from 1 through 8 {
+@each $i in 1, 2, 3, 4, 6, 12 {
 	@for $j from 1 through $i {
 		div.dataview div.grid-#{$j}-#{$i},
 		form.quixote div.grid-#{$j}-#{$i} {
@@ -415,6 +415,21 @@ form.quixote div.grid {
 			box-sizing: border-box;
 			padding-right: 1em;
 			width: (100*$j/$i+0%);
+			@media screen and (max-width: $mobile-limit) {
+				@if $i == 4 and $j <= 2 { width: 50%; }
+				@else if $i == 4 and $j >  2 { width: 100%; }
+				@else if $i == 6 and $j <= 2 { width: (100/3+0%); }
+				@else if $i == 6 and $j == 3 { width: 50%; }
+				@else if $i == 6 and $j <= 5 { width: (200/3+0%); }
+				@else if $i == 6 and $j == 6 { width: 100%; }
+				@else if $i == 12 and $j <= 4 { width: (100/3+0%); }
+				@else if $i == 12 and $j <= 7 { width: 50%; }
+				@else if $i == 12 and $j <= 11 { width: (200/3+0%); }
+				@else if $i == 12 and $j == 12 { width: 100%; }
+			}
+			@media screen and (max-width: $very-small-limit) {
+				width: 100%;
+			}
 			& + div {
 				clear: both;
 			}