[Résolu] Knacss et distribution grille

Bonjour à tous,

J'ai une section contenant un div en mode autogrid contenant au minimum un autre div :

<section id="categorie" class="grid-1 margin-5">
  <div class="autogrid has-gutter-l">
    <div id="1" class="grid-1">
      <div><img src="logo.png"></div>
      <div><p>Cognitis enim pilatorum caesorumque funeribus nemo deinde ad has stationes appulit navem, sed ut Scironis praerupta letalia declinantes litoribus Cypriis contigui navigabant, quae Isauriae scopulis sunt controversa.

Homines enim eruditos et sobrios ut infaustos et inutiles vitant, eo quoque accedente quod et nomenclatores adsueti haec et talia venditare, mercede accepta lucris quosdam et prandiis inserunt subditicios ignobiles et obscuros.</p></div>
    </div>
    <div id="2" class="right"><a href="#"><img src="data/medias/documentations/range.png"></a></div>
  </div>
</section>

Mon problème est dans la distribution de la grille "autogrid". Je l'ai placé en auto car je ne connais pas à l'avance le nombre d'éléments qui seront placés à l'intérieur. Il peut en avoir de 1 à 3. Dans l'exemple il y en a 2. Lorsqu'il y en a plus d'un, la grille affiche chaque div de largeur égale et non adapté à la largeur du contenue de chaque div.

Dans l'exemple id 2 est moins large que id 1 mais les deux div s'affichent avec une largeur égale, du coups je me retrouve avec un gros blanc à gauche de l'image contenue dans id 2.

Est-ce qu'il y a un moyen de contourner ça qui marche aussi lorsque j'ai 3 div à afficher ?

Merci d'avance.
Philippe.

Et l'eau,

Et en français ça donne quoi ? Pour te lire, je m'y suis repris à 3 fois.

Peux tu dire en même temps dire sur quelle version de Knacss tu as ? À noter qu'un id ou une class, ça ne commence pas par un chiffre.
Modifié par niuxe (09 Jun 2020 - 01:54)

Salut,

a écrit :
Peux tu dire en même temps dire sur quelle version de Knacss tu as ?

7.1.1 et je viens de découvrir qu'il y a une 7.1.3... Du coups petite mise à jour en 7.1.3

a écrit :
À noter qu'un id ou une class, ça ne commence pas par un chiffre.

C'était pour pouvoir les identifier dans le post et non les utiliser réellement, mais merci pour l'info.

Pour le reste une petite image sera peut être plus clair et en plus je remet le code :

<section id="categorie" class="grid-1" style="border: 1px solid red">
  <div class="autogrid" style="border: 1px solid green">
    <div class="grid-1" style="border: 1px solid yellow">
      <div style="border: 1px solid">Logo</div>
      <div><p>Cognitis enim pilatorum caesorumque funeribus nemo deinde ad has stationes appulit navem, sed ut Scironis praerupta letalia declinantes litoribus Cypriis contigui navigabant, quae Isauriae scopulis sunt controversa.

Homines enim eruditos et sobrios ut infaustos et inutiles vitant, eo quoque accedente quod et nomenclatores adsueti haec et talia venditare, mercede accepta lucris quosdam et prandiis inserunt subditicios ignobiles et obscuros.</p></div>
    </div>
    <div class="right" style="border: 1px solid grey"><a href="">Une autre image</a></div>
  </div>
</section>

Comme je l'expliquais je ne connais pas à l'avance le nombre de div qui seront placé dans la grille en mode autogrid (green). Je sais juste qu'il peut en avoir de 1 à 3. Dans cette exemple j'en ai deux : le yellow et le grey.

Mon besoin est que, peut importe le nombre de div, grey s'adapte à la taille de son contenu pour que yellow prenne tout l'espace restant. (J'ai l'impression de refaire une scène de Reservoir Dog).

Est-ce possible ?
Modifié par flipflip (09 Jun 2020 - 08:59)