0

I have this grid and, depending on how long the text is, the bottom grid part floats above the bottom of the card. How can I get the green stats card to float at the bottom no matter the length of the text above? Although the text can be lengthy at times, I'd like to avoid cutting it off.

.my-bottles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 20px;
  row-gap: 20px;
}

.bottle-card {
  background-color: #fff;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.9);
  text-align: center;
  transition: 0.5s ease;
  cursor: pointer;
  grid-template-rows: 210px 210px 80px;
  grid-template-areas: "image""text""stats";
}

.bottle-text {
  grid-area: text;
  margin: 25px;
}

.bottle-text .date {
  color: rgb(255, 7, 110);
  font-size: 13px;
}

.bottle-text h2 {
  margin-top: 0;
  font-size: 28px;
}

.bottle-text p {
  color: grey;
  font-size: 15px;
  font-weight: 300px;
}

.bottle-stats {
  grid-area: stats;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  background-color: #899c8d;
  border-bottom-left-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
  font-size: 14px;
}

.bottle-stats .stat {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 10px;
  color: #fff;
}

.bottle-stats .value {
  font-size: 22px;
  font-weight: 500px;
}

.bottle-stats .type {
  font-size: 11px;
  font-weight: 300px;
  text-transform: uppercase;
}

.bottle-stats .border {
  border-left: 1px solid rgb(172, 26, 87);
  border-right: 1px solid rgb(172, 26, 87);
}

.bottle-stats .value sup {
  font-size: 12px;
}
<div class="card bg-transparent no-shadow my-bottles">
  <div class="card bottle-card">
    <div class="bottle-image">
      <img height="200" src="https://cdn11.bigcommerce.com/s-7a906/images/stencil/1000x1000/products/6851/13970/Elijah-Craig-Barrel-Proof__60056.1587069108.jpg?c=2">
    </div>
    <div class="bottle-text">
      <h5>Elijah Craig Barrel Proof 750ML</h5>
    </div>
    <div class="bottle-stats">
      <div class="stat">
        <div class="value">132.8</div>
        <div class="type">Proof</div>
      </div>
      <div class="stat">
        <div class="value">C920</div>
        <div class="type">Batch</div>
      </div>
      <div class="stat">
        <div class="value">1</div>
        <div class="type">Quantity</div>
      </div>
    </div>
  </div>
  <div class="card bottle-card">
    <div class="bottle-image">
      <img height="200" src="https://cdn11.bigcommerce.com/s-7a906/images/stencil/1000x1000/products/1279/8691/Eagle_Rare_10__14110.1433435060.jpg?c=2">
    </div>
    <div class="bottle-text">
      <h5>Eagle Rare 10 Years 750ML</h5>
    </div>
    <div class="bottle-stats">
      <div class="stat">
        <div class="value">132.8</div>
        <div class="type">Proof</div>
      </div>
      <div class="stat">
        <div class="value">-</div>
        <div class="type">Batch</div>
      </div>
      <div class="stat">
        <div class="value">2</div>
        <div class="type">Quantity</div>
      </div>
    </div>
  </div>
  <div class="card bottle-card">
    <div class="bottle-image">
      <img height="200" src="https://cdn11.bigcommerce.com/s-7a906/images/stencil/1000x1000/products/11820/13265/14-Hands-Brut-Rose__31372.1544206006.jpg?c=2">
    </div>
    <div class="bottle-text">
      <h5>14 Hands Brut Rose</h5>
    </div>
    <div class="bottle-stats">
      <div class="stat">
        <div class="value">-</div>
        <div class="type">Proof</div>
      </div>
      <div class="stat">
        <div class="value">-</div>
        <div class="type">Batch</div>
      </div>
      <div class="stat">
        <div class="value">1</div>
        <div class="type">Quantity</div>
      </div>
    </div>
  </div>
  <div class="card bottle-card">
    <div class="bottle-image">
      <img height="200" src="https://cdn11.bigcommerce.com/s-7a906/images/stencil/1000x1000/products/10742/9730/Jack-Daniels-150th-Anniversary-Bottle__49100.1467308282.jpg?c=2">
    </div>
    <div class="bottle-text">
      <h5>Jack Daniels 150th Anniversary Bottle 750ML</h5>
    </div>
    <div class="bottle-stats">
      <div class="stat">
        <div class="value">-</div>
        <div class="type">Proof</div>
      </div>
      <div class="stat">
        <div class="value">-</div>
        <div class="type">Batch</div>
      </div>
      <div class="stat">
        <div class="value">1</div>
        <div class="type">Quantity</div>
      </div>
    </div>
  </div>
  <div class="card bottle-card">
    <div class="bottle-image">
      <img height="200" src="https://cdn11.bigcommerce.com/s-7a906/images/stencil/1000x1000/products/7268/6171/123_organic_tequila_2__55718.1389720468.jpg?c=2">
    </div>
    <div class="bottle-text">
      <h5>123 Organic Tequila #2 Reposado</h5>
    </div>
    <div class="bottle-stats">
      <div class="stat">
        <div class="value">-</div>
        <div class="type">Proof</div>
      </div>
      <div class="stat">
        <div class="value">-</div>
        <div class="type">Batch</div>
      </div>
      <div class="stat">
        <div class="value">1</div>
        <div class="type">Quantity</div>
      </div>
    </div>
  </div>
  <div class="card bottle-card">
    <div class="bottle-image">
      <img height="200" src="https://cdn11.bigcommerce.com/s-7a906/images/stencil/1000x1000/products/11048/12051/Weller-12__00270.1498678906.jpg?c=2">
    </div>
    <div class="bottle-text">
      <h5>Weller 12 Year Bourbon 1.75L</h5>
    </div>
    <div class="bottle-stats">
      <div class="stat">
        <div class="value">-</div>
        <div class="type">Proof</div>
      </div>
      <div class="stat">
        <div class="value">-</div>
        <div class="type">Batch</div>
      </div>
      <div class="stat">
        <div class="value">1</div>
        <div class="type">Quantity</div>
      </div>
    </div>
  </div>
  <div class="card bottle-card">
    <div class="bottle-image">
      <img height="200" src="https://cdn11.bigcommerce.com/s-7a906/images/stencil/1000x1000/products/1428/11402/Wleller-Special-Reserve__24172.1557943501.jpg?c=2">
    </div>
    <div class="bottle-text">
      <h5>Weller Special Reserve 750ML</h5>
    </div>
    <div class="bottle-stats">
      <div class="stat">
        <div class="value">90.0</div>
        <div class="type">Proof</div>
      </div>
      <div class="stat">
        <div class="value">-</div>
        <div class="type">Batch</div>
      </div>
      <div class="stat">
        <div class="value">1</div>
        <div class="type">Quantity</div>
      </div>
    </div>
  </div>
  <div class="card bottle-card">
    <div class="bottle-image">
      <img height="200" src="https://cdn11.bigcommerce.com/s-7a906/images/stencil/1000x1000/products/10661/9606/Caribou_Crossing_Single_Barrel_Canadian_Whisky__58476.1460999066.jpg?c=2">
    </div>
    <div class="bottle-text">
      <h5>Caribou Crossing Single Barrel Canadian Whisky 750ML</h5>
    </div>
    <div class="bottle-stats">
      <div class="stat">
        <div class="value">-</div>
        <div class="type">Proof</div>
      </div>
      <div class="stat">
        <div class="value">-</div>
        <div class="type">Batch</div>
      </div>
      <div class="stat">
        <div class="value">1</div>
        <div class="type">Quantity</div>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/buomvxgy/

Gerard
  • 15,418
  • 5
  • 30
  • 52

1 Answers1

2

you just need to add margin-top auto to the bottle-stats. just add these css that i am giving. Thanks!.

.bottle-card {
    display: flex;
    flex-direction: column;
}
.bottle-stats {
    margin-top: auto;
}
Shabbir Vaghela
  • 224
  • 2
  • 8