CSS 网格底部填充

如何解决CSS 网格底部填充

我有这个网格，根据文本的长度，底部网格部分浮动在卡片底部的上方。无论上面文本的长度如何，我怎样才能让绿色的统计卡漂浮在底部？尽管文本有时会很长，但我希望避免将其剪掉。

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

解决方法

您只需要将 margin-top auto 添加到 Bottle-stats 中。只需添加我提供的这些 css。谢谢！

.bottle-card {
    display: flex;
    flex-direction: column;
}
.bottle-stats {
    margin-top: auto;
}

如何解决CSS 网格底部填充

解决方法

相关推荐