Knacss, liste et grille

Bonjour

Je suis nouveau sur le forum et aussi nouvel utilisateur de knacss. je teste le framework depuis un moment, c'est vraiment très bien, mais voilà, je tombe sur un problème que je ne parviens pas à résoudre.
Mon problème est le suivant: j'utilise une liste pour afficher une succession de blocks qui viennent se caler sur la page suivant une grille de 3 colonnes (jusque là tout va bien) mais lorsque mes blocks passent sur 2 lignes, donc dès le 4eme block, j'ai une marge à droite qui vient décaler l’alignement des blocks.
Après différents essais impossible de retirer cette marge. quelqu'un pourrait-il m'aider ?

Voila l'exemple avec CodePen : http://codepen.io/anon/pen/GgmAe

ou, ci-dessous le html à utiliser avec Knacss

<ul class="line grid3">
<li class="mod" style="height:40px; margin-bottom: 10px;"> 1 - Lorem Elsass ipsum réchime amet non Choucroute knack&hellip;
</li>
<li class="mod" style="height:40px; margin-bottom: 10px;"> 2 - Lorem Elsass ipsum réchime amet non Choucroute knack&hellip;
</li>
<li class="mod" style="height:40px; margin-bottom: 10px;"> 3 - Lorem Elsass ipsum réchime amet non Choucroute knack&hellip;
</li>
<li class="mod" style="height:40px; margin-bottom: 10px;"> 4 - Lorem Elsass ipsum réchime amet non Choucroute knack&hellip;
</li>
<li class="mod" style="height:40px; margin-bottom: 10px;"> 5 - Lorem Elsass ipsum réchime amet non Choucroute knack&hellip;
</li>
<li class="mod" style="height:40px; margin-bottom: 10px;"> 6 - Lorem Elsass ipsum réchime amet non Choucroute knack&hellip;
</li>
<li class="mod" style="height:40px; margin-bottom: 10px;"> 7 - Lorem Elsass ipsum réchime amet non Choucroute knack&hellip;
</li>
<li class="mod" style="height:40px; margin-bottom: 10px;"> 8 - Lorem Elsass ipsum réchime amet non Choucroute knack&hellip;
</li>
<li class="mod" style="height:40px; margin-bottom: 10px;"> 9 - Lorem Elsass ipsum réchime amet non Choucroute knack&hellip;
</li>
</ul>

Merci d'avance pour votre aide.
Alex
Modifié par xelax01 (21 Jun 2013 - 16:29)

Hello,

Tu peux appliquer ce genre de style :

li:nth-child(3n+1) {margin-left: 0}

Par contre, ce serait peut-être mieux d'utiliser une liste ordonnée (ol) plutôt qu'un ul, non ?

Et au final, ce que tu veux obtenir, ce ne serait pas du multicolonnes ?

http://www.alsacreations.com/tuto/lire/1557-les-multicolonnes-en-css3.html

Bonne soirée

Merci pour cette réponse.

Je ne connaissait pas "formule" CSS que tu me conseil :

li:nth-child(3n+1) {margin-left: 0}

cela semble être parfait pour mon problème.

C'est bien du multicolonnes que je veux obtenir et je ne connaissait pas non plus le "Multi-column Layout Module".
Pour les numéros cela me servait juste à identifier les pavés sur mon test.
Un message et j'en apprends beaucoup : Merci encore.

Bonne journée.