28172 sujets

CSS et mise en forme, CSS3

Knacss, colonne qui s'adapte à la largeur du contenue

Bonjour à tous,

<div class="grid-2-small-1">
  <div><img src="..."></div>
  <div><h1>Un titre</h1></div>
</div>


J'utilise Knacss 7.1.3. En l'état les deux div items s'affichent l'un à côté de l'autre avec une taille de colonne identique. Mon objectif est de faire en sorte que chaque colonnes s'adaptent à la largeur de son contenue.

J'y suis presque arrivé en ajoutant cette class


.grid-autosize {
    display: grid;
    grid-auto-columns: auto;
    justify-content: start;
    grid-auto-flow: column;
}

<div class="grid-autosize">
  <div><img src="..."></div>
  <div><h1>Un titre</h1></div>
</div>


Sauf que pour que cela marche je dois supprimer grid-2-small-1, intégrer de nouveau display et par la même occasion je perds le côté responsive qui dans mon cas affiche ce container sur 1 ligne en mode mobile. Comment faire pour intégrer la notion de largeur minimum en cumulant avec Knacss ?

Merci d'avance.
Modifié par flipflip (01 Apr 2021 - 14:27)
Administrateur
Hello, tu peux y parvenir de façon naturelle avec Grid Layout (avec ou sans KNACSS)

Version pour deux colonnes uniquement :

.grid-autosize {
  display: grid;
  grid-template-columns: max-content max-content;
}


Version pour nombre de colonnes inconnu :

.grid-autosize {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
}


Démo en ligne : https://codepen.io/raphaelgoetter/pen/abpJZZB?editors=1100
Modifié par Raphael (01 Apr 2021 - 20:09)
Merci pour ta proposition cela marche... presque.

Mon image et le titre s'affiche bien à côté de l'autre et les colonnes s'adaptent bien mais lorsque je bascule en mode mobile je souhaite que mon image et mon titre s'affiche l'un en dessous de l'autre. D'où l'usage de la class grid-2-small-1.

Avec ton code les deux restes sur la même ligne avec le titre qui déborde hors de la fenêtre.

Si je fais un combo de ta proposition en ajoutant grid-2-small1, la colonne de l'image se réduit à peau de chagrin et le titre déborde toujours de la fenêtre.
Modifié par flipflip (02 Apr 2021 - 08:45)
Administrateur
Ah oui, si tu veux conserver la faculté de changer de mise en page en responsive, tu n'es plus dans le cadre de ce que sait faire KNACSS et c'est bien normal : la grille de KNACSS (surtout l'ancienne version v7) est volontairement simplissime et ce que tu demandes ne l'est pas.

Il va te falloir ajouter un Media Query pour gérer la modification des colonnes.

Par exemple : 
.container {
    display: grid;
    grid-gap: .5rem;
  }
@media (min-width: 640px) {
  .container {
    grid-template-columns: max-content max-content;
  }
}


https://codepen.io/raphaelgoetter/pen/abpJZZB?editors=1100
Sujet clos
Aller à