CSS网格底部填充

Question

我有这个网格，根据文本的长度，底部的网格部分漂浮在卡片底部的上方。我怎样才能让绿色的统计卡片浮在底部，不管上面的文字的长度?虽然文本有时可能很长，但我希望避免把它剪掉。

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

Answer 1

您只需将margin-top auto添加到瓶状态。只需添加这些CSS，我给。谢谢! .

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