Le systeme de grille permet de définir la taille des conteneur en fonction de la largeur de l'écran
Il vous suffit de mettre la classe .c-row sur l'élément racine puis de mettre la classe .c-col.
Vous pouvez par la suite personnaliser la largeur des .c-col en y ajoutant une classe du format .c-x__n où x est une (ou deux) lettre correspondant à une taille d'écran, et finissant par un nombre compris entre 1 et 12.
.c-l : Toutes tailles d'écran.c-d : < 1200px.c-m : < 1024px.c-xm : < 840px.c-t : < 768px.c-s : < 640pxclass="c-l__12" correspondra donc à 100% partout
class="c-l__6 c-t__12" à 50%, et 100% sur les écrans de tablettes et inférieur
class="c-l__4" à 33%
class="c-l__3" à 25%
etc...
La somme des nombres des classes .c- d'un même breakpoint (même lettre) doivent normalement toujours faire un total de 12
<div class="c-row">
<div class="c-col c-l__4 c-m__12">
<div class="o-input__holder">
<div class="c-label">
<label>Input with unit</label>
</div>
<input type="number" id="inputUnit" data-validation="email"/>
<div class="c-unit">%</div>
</div>
</div>
<div class="c-col c-l__4 c-m__12">
<div class="o-input__holder">
<div class="c-label">
<label>Input with unit</label>
</div>
<input type="number" id="inputUnit" data-validation="email"/>
<div class="c-unit">%</div>
</div>
</div>
<div class="c-col c-l__4 c-m__12">
<div class="o-input__holder">
<div class="c-label">
<label>Input with unit</label>
</div>
<input type="number" id="inputUnit" data-validation="email"/>
<div class="c-unit">%</div>
</div>
</div>
</div>
<div class="c-row">
<div class="c-col c-l__3 c-d__12">
<div class="o-input__holder">
<div class="c-label">
<label>Input with unit</label>
</div>
<input type="number" id="inputUnit" data-validation="email"/>
<div class="c-unit">%</div>
</div>
</div>
<div class="c-col c-l__3 c-d__12">
<div class="o-input__holder">
<div class="c-label">
<label>Input with unit</label>
</div>
<input type="number" id="inputUnit" data-validation="email"/>
<div class="c-unit">%</div>
</div>
</div>
<div class="c-col c-l__3 c-d__12">
<div class="o-input__holder">
<div class="c-label">
<label>Input with unit</label>
</div>
<input type="number" id="inputUnit" data-validation="email"/>
<div class="c-unit">%</div>
</div>
</div>
<div class="c-col c-l__3 c-d__12">
<div class="o-input__holder">
<div class="c-label">
<label>Input with unit</label>
</div>
<input type="number" id="inputUnit" data-validation="email"/>
<div class="c-unit">%</div>
</div>
</div>
</div>