Keep the button at bottom no matter the length of text

May 11, 2022

I want to keep the button at bottom previously which I was making it possible by writing more text to push it to bottom but it wasn’t responsive for every device any way I can keep the button in a div at bottom?

:root {
  --clr-primary: #651fff;
  --clr-gray: #37474f;
  --clr-gray-light: #b0bec5;
}

* {
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
  margin: 0;
  padding: 0;
}

body {
  color: var(--clr-gray);
  margin: 2rem;
}

.wrapper-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 20rem);
  justify-content: center;
}

.container {
  overflow: hidden;
  box-shadow: 0px 2px 8px 0px var(--clr-gray-light);
  background-color: white;
  text-align: center;
  border-radius: 1rem;
  position: relative;
  margin: 2rem 0.5rem;
}

.banner-img {
  position: absolute;
  background-image: url(https://gaito.000webhostapp.com/im/istockphoto-1307289824-640x640.jpg);
  height: 10rem;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.profile-img {
  width: 8rem;
  clip-path: circle(60px at center);
  margin-top: 4.5rem;
  height: 8rem;
}

.name {
  font-weight: bold;
  font-size: 1.5rem;
}

.description {
  margin: 1rem 2rem;
  font-size: 0.9rem;
}

.btn {
  width: 100%;
  border: none;
  font-size: 1rem;
  font-weight: bold;
  color: white;
  padding: 1rem;
  background-color: var(--clr-primary);
}

<div class="wrapper-grid">
  <div class="container">
    <div class='banner-img'></div>
    <img src='https://i.pinimg.com/originals/49/09/f9/4909f9e82c492b1e4d52c2bcd9daaf97.jpg' class="profile-img">
    <h1 class="name">Slime</h1>
    <p class="description">Slimes also commonly called ooze are common types of</p>
    <button class='btn'>Attack this dungeon </button>
  </div>
  <div class="container">
    <div class='banner-img'></div>
    <img src='https://static.wikia.nocookie.net/kumo-desu-ga-nani-ka/images/4/4c/Mother_1.png/' alt='profile image' class="profile-img">
    <h1 class="name">Gaint spider</h1>
    <p class="description">This creature shoots sticky strands of webbing from its abdomen which are most commonly found underground, making their lairs on ceilings or in dark, web-filled crevices.</p>
    <button class='btn'>Attack this dungeon </button>
  </div>
</div>

Codepen

>Solution :

My solution would be:

.container {
  display: flex;
  flex-flow: column nowrap; /* Flex everything inside your cards vertically */
}
.description {
  flex-grow: 1;
  /*
    When a card has more space (because another card is taller
    with more info) - grow the description
  */
}

Here is a working snippet, click Full page top right to see it working:

:root {
  --clr-primary: #651fff;
  --clr-gray: #37474f;
  --clr-gray-light: #b0bec5;
}

* {
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
  margin: 0;
  padding: 0;
}

body {
  color: var(--clr-gray);
  margin: 2rem;
}

.wrapper-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 20rem);
  justify-content: center;
}

.container {
  overflow: hidden;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  box-shadow: 0px 2px 8px 0px var(--clr-gray-light);
  background-color: white;
  text-align: center;
  border-radius: 1rem;
  position: relative;
  margin: 2rem 0.5rem;
}

.banner-img {
  position: absolute;
  background-image: url(https://gaito.000webhostapp.com/im/istockphoto-1307289824-640x640.jpg);
  height: 10rem;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.profile-img {
  width: 8rem;
  clip-path: circle(60px at center);
  margin-top: 4.5rem;
  height: 8rem;
}

.name {
  font-weight: bold;
  font-size: 1.5rem;
}

.description {
  flex-grow: 1;
  margin: 1rem 2rem;
  font-size: 0.9rem;
}

.btn {
  width: 100%;
  border: none;
  font-size: 1rem;
  font-weight: bold;
  color: white;
  padding: 1rem;
  background-color: var(--clr-primary);
}

<div class="wrapper-grid">
  <div class="container">
    <div class='banner-img'></div>
    <img src='https://i.pinimg.com/originals/49/09/f9/4909f9e82c492b1e4d52c2bcd9daaf97.jpg' class="profile-img">
    <h1 class="name">Slime</h1>
    <p class="description">Slimes also commonly called ooze are common types of</p>
    <button class='btn'>Attack this dungeon </button>
  </div>
  <div class="container">
    <div class='banner-img'></div>
    <img src='https://static.wikia.nocookie.net/kumo-desu-ga-nani-ka/images/4/4c/Mother_1.png/' alt='profile image' class="profile-img">
    <h1 class="name">Gaint spider</h1>
    <p class="description">This creature shoots sticky strands of webbing from its abdomen which are most commonly found underground, making their lairs on ceilings or in dark, web-filled crevices.</p>
    <button class='btn'>Attack this dungeon </button>
  </div>
</div>