Un système de grille adaptive sur douze colonnes est proposé pour le formatage des formulaires.
Chaque classe CSS pour un élément de la grille est décrit numériquement
par sa largeur. Par exemple, grid-1-2 pour un élément
faisant la moitié de la largeur, grid-2-3 pour un élément
en faisant les deux-tiers. Les dénominateurs possibles sont 2, 3, 4, 6
et 12.
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.
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
grid-x-y de la classe never-alone.
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, newline peut être posée sur le premier
élément de la nouvelle ligne.