GRID ou FLEX pour 2 ou 3 lignes selon contenu ?

<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}

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

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

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

.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>

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.

.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);
    }
  }
}

boteha_2 a écrit :
J'ai créé un codepen.

Ma container query ne fonctionne pas...

Merci d'avance pour le secours.

.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);
    }
  }
}

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) :

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 ...

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;
}
<a href="#">Retourner identification</a>
<a href="#" class="bloc">Modifier qua ;jhntité</a>
<a href="#" class="su">Supprimer le panier</a>

.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;
  }
}

drphilgood a écrit :
m'enfin
j'ai évidemment testé et (ici) çà fonctionne
snif

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

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