28182 sujets

CSS et mise en forme, CSS3

GRID ou FLEX pour 2 ou 3 lignes selon contenu ?

Pages :
Bonjour,

J'ai trois boutons.

<div id="panier">
<div class="act">
<a href="#">Retourner identification</a>
<a href="#">Modifier quantité</a>
<a href="#" class="su">Supprimer le panier</a>
</div>
</div>


#panier {width: 20em}

div.act {justify-items: stretch; justify-content: start}

#panier > div.act {grid-template-columns: auto, auto; column-gap: 2px; row-gap: 2px}
#panier > div.act > a:first-child {grid-column: 1; grid-row: 1}
#panier > div.act > a:nth-child(2) {grid-column: 2; grid-row: 1}
#panier > div.act > a.su {grid-column: 1 / span 2; grid-row: 2}


Le contenu du texte des boutons est dynamique, plus ou moins long.

Si court, deux boutons sur la première ligne et un sur la seconde, selon code ci-dessus.

Mais si cela dépasse la largeur de 20em j'aimerais que cela passe automatiquement sur 3 lignes.

Il s'agit d'être responsive selon le contenu.

Voyez-vous une solution ?
Modifié par boteha_2 (30 Jun 2024 - 11:45)
Modérateur
Ce n'est pas trés clair,
a écrit :
Mais si cela dépasse la largeur de 20em j'aimerais que cela passe automatiquement sur 3 lignes.

...mais cela pourrait ressembler de prés ou de loin à ces deux sujets:

https://forum.alsacreations.com/topic-4-90962-1-Resolu-Column-auto-fit-dans-un-parent-max-width-min-content.html ou https://forum.alsacreations.com/topic-4-90890-1-Passer-a-la-ligne-lelement-du-milieu-dune-liste-de-3-elements.html ??

avec un container querie et grid , c'est peut-être une piste ? : https://codepen.io/gc-nomade/pen/jOoxarB
Modifié par gcyrillus (23 Jun 2024 - 16:42)
Bonjour gcyrillus,

Merci de ton suivi.

gcyrillus a écrit :
Ce n'est pas trés clair,


Si assez de place :
Lien 1 Lien 2
Lien 3 en span / 2

Si pas assez de place
Lien 1
Lien 2
Lien 3

gcyrillus a écrit :
avec un container querie et grid , c'est peut-être une piste ? : https://codepen.io/gc-nomade/pen/jOoxarB


Je n'y ai pas pensé mais container querie semble avoir été créé pour ce problème.

Ton codepen ne correspond pas exactement à l'énoncé mais je pense qu'il donne la solution.

Je fais mes tests et je reviens.
salut
en ajoutant display çà fonctionne
inline-block sur le 2eme bouton
et block sur le 3eme (su)
si les 2 premiers sont plus long çà passe en 3 lignes

.bloc {
display: inline-block;
}
.su {
display: block;
}
<a href="#">Retourner identification</a>
<a href="#" class="bloc">Modifier qua ;jhntité</a>
<a href="#" class="su">Supprimer le panier</a>
Modérateur
boteha_2 a écrit :
Bonjour gcyrillus,

Merci de ton suivi.
Si assez de place :
Lien 1 Lien 2
Lien 3 en span / 2

Si pas assez de place
Lien 1
Lien 2
Lien 3

Je n'y ai pas pensé mais container querie semble avoir été créé pour ce problème.

Ton codepen ne correspond pas exactement à l'énoncé mais je pense qu'il donne la solution.

Je fais mes tests et je reviens.


alors ce serait plutôt https://codepen.io/gc-nomade/pen/PoveEqm je pense du coup
Bonjour,

On peut le faire proprement avec Grid ou Flex.

Si on utilise flex tout le secret est dans la règle `flex-basis: 50%` ou, si l'on utilise une gouttière (1em par exemple) : `flex-basis: calc(50% - 1em / 2)`. Et dans ce cas on n'a pas besoin de media queries pour la largeur du troisième item, contrairement à grid layout pour qui il faudrait alors un `grid-column: span 2`.

Exemple en flex (non testé) avec une gouttière de 1em :
.parent-element {
  --gap: 1em;
  display: flex;
  gap: var(--gap);
  width: 100%;
  @media (width < 26em) { /* valeur media à adapter bien sûr */
    & > * {
      flex: 1;
      flex-basis: calc(50% - var(--gap) / 2);
    }
  }
}

EDIT : attention, ce code est trop spécifique, il force un nombre N d'éléments à s'aligner sur deux colonnes, mais ce n'est pas le sujet ici. Cf. les messages plus bas.
Modifié par Olivier C (24 Jun 2024 - 05:02)
Modérateur
boteha_2 a écrit :
J'ai créé un codepen.

Ma container query ne fonctionne pas...

Merci d'avance pour le secours.

.panier ne laisse pas 16em de largeur à act, du coup la containerquerie ne se déclenche pas.
Il y a un padding de 1em, ce qui laisse 14em seulement a act ...
Ah oui, tiens, la même chose avec un container queries (toujours non testé car je suis au taf' avec un matos flingué, donc je code en aveugle) :
.parent-element {
  :has(> &) {
    container: buttons/inline-size;
    width: 100%; /* @note Important si le conteneur n'a pas de largeur définie par défaut. */
  }
  --gap: 1em;
  display: flex;
  gap: var(--gap);
  width: 100%;
  @container buttons (width < 26em) {
    & > * {
      flex: 1;
      flex-basis: calc(50% - var(--gap) / 2);
    }
  }
}

EDIT : attention, ce code est trop spécifique, il force un nombre N d'éléments à s'aligner sur deux colonnes, mais ce n'est pas le sujet ici. Cf. les messages plus bas.
Modifié par Olivier C (24 Jun 2024 - 05:03)
Merci de votre suivi.

Olivier C a écrit :
Ah oui, tiens, la même chose avec un container queries (toujours non testé car je suis au taf' avec un matos flingué, donc je code en aveugle) :


Je préférerais une solution en GRID car c'est ce que j'ai dans mon code et passer en FLEX suppose pas mal de changements (mais merci beaucoup pour ton code en aveugle).

gcyrillus a écrit :
.panier ne laisse pas 16em de largeur à act, du coup la containerquerie ne se déclenche pas.
Il y a un padding de 1em, ce qui laisse 14em seulement a act ...


Nouveau codepen.

Panier : 20em
Query : 19em

La query se déclenche pour les deux blocs.
Je n'arrive pas à trouver les réglages pour déclencher la query uniquement sur le premier bloc.
Pourtant l'approche avec un container query est bonne sur le plan théorique, non ?
drphilgood a écrit :
salut
en ajoutant display çà fonctionne
inline-block sur le 2eme bouton
et block sur le 3eme (su)
si les 2 premiers sont plus long çà passe en 3 lignes

.bloc {
display: inline-block;
}
.su {
display: block;
}
&lt;a href="#"&gt;Retourner identification&lt;/a&gt;
&lt;a href="#" class="bloc"&gt;Modifier qua ;jhntité&lt;/a&gt;
&lt;a href="#" class="su"&gt;Supprimer le panier&lt;/a&gt;


J'ai essayé dans le codepen, mais non, cela ne fonctionne pas.
Modérateur
panier 20em + padding 1em = 18em dispo Smiley cligne (1em de chaque cotés)

est ce que :
.panier {
  margin: 1em;
  padding: 1em;
  border: solid;
  width: 21em;
  white-space: nowrap;
}

div.act {
  container: act / inline-size;
  display: grid;
  justify-items: stretch;
  justify-content: start;
}

.panier > div.act {
  grid-template-columns: auto auto;
  column-gap: 2px;
  row-gap: 2px;
}

.panier > div.act > a {
  padding: 1em;
  border: 1px solid green;
}

.panier > div.act > a:first-child {
  grid-column: 1;
  grid-row: 1;
}
.panier > div.act > a:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}
.panier > div.act > a.su {
  grid-column: 1 / span 2;
  grid-row: 2;
}

@container act (width < 19em) {
  .panier > div.act {
    grid-template-columns: auto;
  }
  .panier > div.act > a:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }
  .panier > div.act > a.su {
    grid-column: 1;
    grid-row: 3;
  }
}

est ce que tu veut?
drphilgood a écrit :
m'enfin
j'ai évidemment testé et (ici) çà fonctionne
snif


Pas de lien, où as-ru testé ?

Autrement, dans le codepen j'ai allongé le contenu du premier lien.

Du coup la première ligne est plus large que le parent et pourtant la container query ne se déclenche pas.

gcyrillus, excuse moi si je suis pas clair mais il me semble que l'énoncé est simple et bien illustré par le codepen.

Un bloc parent à largeur fixe (20em).
Un enfant en GRID avec 3 éléments dont la largeur est définie par un contenu dynamique.
E1 et E2 sont sur la même ligne
Si E1 + E2 > 20em on passe en 3 lignes.

Est-ce clair ?
Modifié par boteha_2 (23 Jun 2024 - 22:34)
Modérateur
drphilgood a écrit :
m'enfin
j'ai évidemment testé et (ici) çà fonctionne
snif

Oui, tu as raison, l'affichage d'une grille n'est pas toujours nécessaire. On arrivait à trouver des solutions avant que flex et grid et les medias queries n'entrent en jeu. Smiley cligne
gcyrillus a écrit :
@boteha,
dans ce cas , flex et flex-wrap sont probablement plus proche, sans avoir a jouer avec des medias truc.
https://codepen.io/gc-nomade/pen/JjqvLpx teste avec resize aussi pour suivre un comportement générique quelque soit la largeur Smiley cligne


Je regarde avec attention demain.

Encore merci pour le suivi.

PS : n'avez-vous pas une idée sur le non-fonctionnement du medias truc ?
J'ai testé avec plusieurs navigateurs...
gcyrillus a écrit :
@boteha,

dans ce cas , flex et flex-wrap sont probablement plus proche, sans avoir a jouer avec des medias truc.
https://codepen.io/gc-nomade/pen/JjqvLpx teste avec resize aussi pour suivre un comportement générique quelque soit la largeur Smiley cligne 

.act {
  display:flex;
  flex-wrap:wrap;
  gap:1em;
}

Mais c'est bien sûr ! Ce n'était pas la peine d'aller chercher midi à quatorze heure comme j'ai fais plus haut !
En fait mon code forçait un nombre N d'éléments à s'aligner sur deux colonnes, mais ce n'était pas le sujet ici.
Modifié par Olivier C (24 Jun 2024 - 04:59)
Prévenir un modérateur
Pages :
Répondre au sujet
Aller à