Problème grid responsive avec Knacss

Bonjour,

Je viens vers vous car je rencontre un problème avec le système de grilles.
J'ai du mal à comprendre :
Lorsque j'utilise la classe grid-2-1, la colonne enfant de droite possède la propriété

width: calc(33.3333% - 2rem)

.
Sauf que le -2rem empêche cette colonne de prendre toute la largeur disponible (33.3333% donc) en taille small et medium.
Ce -2rem ajoute une marge à droite de la colonne de droite.

La solution que j'ai trouvé c'est de rajouter sur la div (aside en l'occurence) les classes

medium-w33 small-w33

pour forcer la width a 33.3333% sans le -2rem. Mais je ne suis pas satisfait de ce moyen.

Est-ce un bug connu ? D'où est-ce que cela peut-it provenir ?

Screenshot à l'appui :
Résultat mauvais (sans medium-w33)

Résultat escompté (avec)

Bonjour Hisato,

Merci pour ce retour et les détails de ton souci.

Personnellement j'ai toujours du mal à comprendre pourquoi on se force à utiliser une grille pour positionner simplement 2 éléments (dans ton cas .col-left et .col-right).

De mon côté, je pencherai préférentiellement pour un positionnement classique, sans grille : https://github.com/alsacreations/KNACSS/blob/master/doc/02b-layout-positionnement.md

L'explication de la situation est celle-ci : si tu choisis une grille de type .grid-2-1, alors des gouttières de 2rem séparent chaque enfant. La taille des enfants de droite doit forcément inclure cette gouttière pour que le total ne soit pas faussé, ils ne doivent pas faire 33% mais (33% - la gouttière).

Pour info, et ceci va sans doute t'intéresser : la nouvelle version de la grille de KNACSS est actuellement testable en avant première et devrait résoudre tous tes problèmes : http://www.alsacreations.com/actu/lire/1712-grillade-encore-une-nouvelle-grille-en-flexbox.html

Bonne chance

Bonjour Raphael,
Merci pour ta réponse.

Je voulais apporter quelques précisions : le grid-2-1 dans mon cas fonctionne bien comme je le veux en version au dessus de medium.

J'en viens à ma question : dans quel cas est t-il préférable d'utiliser les grilles ?

Hisato a écrit :
J'en viens à ma question : dans quel cas est t-il préférable d'utiliser les grilles ?

Pour les nombreux composants dont les éléments s'affichent sous forme de grille
- galeries de produits
- listes de témoignages
- listes de services
- galeries de références
- contenus multi-colonnes (footer)
- etc.

Il y a plein d'exemples de composants de ce type dans la vraie vie :
- http://www.alsacreations.fr/
- http://formations.alsacreations.fr/formations.html

Par exemple

Mais quand il s'agit juste de placer 2 boîtes l'une à côté de l'autre, utiliser une grille me semble sur-dimensionné.

Bonjour,

J'arrive très longtemps après la bataille (désolé pour le déterrage), car je tente d'adapter à la version courante de Knacss le thème ortegeek (https://ortegeek.fr/article39/ortegeek-fr-ameliore-le-code-source-du-theme-debarque) sur PluXml.

Je suis très limité en css.

Il se trouve que ce thème utilise extensivement la classe grid-2-1.

Comment peut-on exprimer l'équivalent en knacss-7.0.8 ? De façon à obtenir 2 colonnes de 2/3 et 1/3 ?

Merci pour toute piste.

Christophe

PS : je m'aperçois, après recherches, que la réponse ne va pas du tout de soi. Je vais donc attendre tranquillement d'avoir fait des progrès (hum) ou que le concepteur du thème fasse une mise à jour comme il l'a annoncé
Modifié par chantoine (25 Sep 2018 - 10:04)