CSS Grid底部填充[重复]答案

【问题标题】：CSS Grid bottom padding [duplicate]CSS Grid底部填充[重复]
【发布时间】：2021-05-30 15:28:37
【问题描述】：

我有这个网格，根据文本的长度，底部网格部分会浮在卡片底部上方。无论上面的文字长度如何，如何让绿色统计卡漂浮在底部？虽然文本有时可能很长，但我想避免将其截断。

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

【问题讨论】：

标签： css

【解决方案1】：

您只需将margin-top auto 添加到瓶子统计信息中。只需添加我提供的这些 CSS。谢谢！。

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

【讨论】：