28172 sujets

CSS et mise en forme, CSS3

[Résolu] Disposition adaptative en CSS Grids Layout

Bonjour à toutes et à tous,

Sur cette page de site : http://leqlub.lib-web.fr , j'ai un problème avec le filtre :
upload/1627379999-65880-screenshot1.jpg

Sur l'image ci-dessus, j'aimerais que les deux "fiches partenaire" soient côte à côte. Cependant, le fonctionnement de mon filtre pose problème. En effet, il réserve forcément au moins une ligne complète par élément, même si elle est quasi vide.

Ma question est la suivante : est-il possible, en CSS Grids Layout, de faire en sorte que l'élément template ne prenne que la place occupée par son contenu ?

Ce problème est très difficile à expliquer, j'espère que vous comprendrez. Si ce n'est pas assez clair, je répondrai à vos questions !

Merci d'avance.
Modifié par Myrial (27 Jul 2021 - 12:05)
Modérateur
Bonjour,

Lorsque tu utilises grid, la configuration de la grille se fait à partir du parent, les enfants iront ensuite s'afficher dans les cellules de la grille que tu as définie.

Un exemple de ce que tu pourrais faire en partant du conteneur parent.
.wp-block-ub-content-filter {
    min-height: 50vh;
  /*ajout */
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
}

.ub-content-filter-category {
    text-align: center;
  /* ajout */
    grid-column: 1 / -1;
}

.ub-content-filter-panel {
    max-width: 1100px;
    margin: auto;
    padding: 20px;
  /* retrait */
    /*display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 20px;*/
}


grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); va donner une largeur minimale de cellule a 300px (a toi de voir si cette valeur est convenable) sans fixer un nombre de colonnes en réadaptant le nombre de ligne et de colonne de la grille en fonction de la largeur dispo et du nombre d'enfant.

grid-column: 1 / -1; l’élément est positioné dans la première colonne et traversera toute les colonnes pour occuper une ligne complète. (cela fonctionne aussi dans firefox maintenant).

Dans la section tutoriels, il y a plusieurs tutoriels qui t'expliqueront comment utiliser grid avec tout un tas de bon conseils. Smiley cligne
Modifié par gcyrillus (28 Jul 2021 - 15:25)
Oooh merci ! Je pensais connaître grid mais il reste pas mal de petites propriétés que je ne connais pas, et qui sont bien pratiques !

Encore merci pour l'intérêt que tu as porté à mon problème Smiley biggrin
Modifié par Myrial (29 Jul 2021 - 15:57)
Up : Je pensais que le problème était résolu, mais en fait non ! Avec ta solution, chacun de mes conteneurs ".ub-content-filter-panel" sont mis en place dans un seul emplacement de grille car tu as appliqué les réglages à ".wp-block-ub-content-filter". Pour clarifier un peu ce que je veux, voici un petit schéma légendé :
upload/1627567880-65880-screenshot2.jpg

La problématique : je veux pouvoir insérer le nombre de blocs jaunes que je veux, et que la taille des conteneurs s'adapte pour qu'ils puissent se suivre comme sur mon exemple ci-dessus.

Je ne peux pas changer la structure HTML de mon document, elle est due à un plugin.
Modérateur
Effectivement, la structure s'est rempli depuis la derniere fois,

Dans ce cas : 
.wp-block-ub-content-filter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1em;
  max-width: 1100px;
  margin: auto;
}
.ub-content-filter-category {
    text-align: center;
    grid-column: 1 / -1;
}
.ub-content-filter-panel {
  display: contents;
}


Pourrait te convenir, cela revient a faire disparaitre virtuellement les conteneurs ub-content-filter-panel pour que leurs enfants soit tous adjacents/frères.

Il y aura peut-être subgrid bientôt : https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Subgrid mais ça bugue encore dans Firefox le seul pour le moment supposé l'implémenter.

Cdt
Modifié par gcyrillus (29 Jul 2021 - 16:43)
Meilleure solution
Ca fonctionne incroyablement bien, j'avais peur que personne ne comprenne ma problématique mais tu t'es penché dessus et tu m'as retiré une épine du pied, merci beaucoup. Plus j'en apprends sur les grids, plus je les apprécie !

Bonne continuation et encore merci, sujet résolu !
Sujet clos
Aller à