3 colonnes, 3 boutons comment les aligner en responsiv

Bonjour,
Sur mon site j'ai une page avec 3 colonnes dans ces colonnes j'ai un bouton en bas (Image ci-joint). Lorsque la taille d’écran diminue les boutons ne sont plus alignés (à cause du texte au dessus). J'ai essayé avec une min-height sur le texte mais cela oblige à changer beaucoup de fois la min-height jusqu'au format mobile.

Avez-vous, s'il vous plaît, une solution plus efficace et rapide pour ce problème ?
Modifié par Cahal (12 Apr 2021 - 16:30)

Salut,

Des solutions il y en a à la pelle... le première que je vois c'est un mélange de grid et de flex :

<div class="wrapper">
  <div class="col">
    <div class="titre">COL 1</div>
    <p>blabla</p>
    <div class="bouton">
      <button>coucou</button>
    </div>
  </div>
  <div class="col">
    <div class="titre">COL 2</div>
    <p>blablab lablabl  ablablablab ablabl ablablablab lablabl  ablablablab ablabl ablablablab lablabl  ablablablab ablabl ablablablab lablabl  ablablablab abl lablabl  ablablablab ablabl ablablablab lablabl  ablablablab ablabl ablablablab lablabl  ablablablab ablabl abla</p>
    <div class="bouton">
      <button>coucou</button>
    </div>
  </div>
  <div class="col">
    <div class="titre">COL 3</div>
    <p>blabla</p>
    <div class="bouton">
      <button>coucou</button>
    </div>
  </div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
  .col {
    display: flex;
    flex-direction: column;
    border: 1px solid red;
  }
    .col * {
      border: 1px solid blue;
    }
    p {
      flex: 1;
      margin:0;
    }

En action : https://jsfiddle.net/undless/jeomc26k/

Apres c'est pas la seul et c'est peut être pas la meilleure...

Bonne journée !

Merci je vais essayer ça.

Eh low,

@_laurent: +1

Je pense que j'aurais fait un truc du genre. J'aurais toutefois fait un repeat(3, 1fr). Mais c'est pour chipoter. Après au niveau sémantique, j'aurais fait surement différemment. Mais pas mal du tout

niuxe a écrit :
Après au niveau sémantique, j'aurais fait surement différemment.

C'est mes "blablabla" qui te plaisent pas ?!