筆視圖：https : //codepen.io/peter952001/pen/wvqrKwR
我是 CSS 的初學者，正在嘗試從頭開始構建博客網站（使用 Django）。我想像這樣為主頁上的每篇博文制作卡片
<div class="container">
<div class="card-wrapper">
<div class="card">
<!-- Some post info -->
</div>
</div>
</div>
但是，我無法根據它們的數量使卡片居中（每行最多 5 個）。因此，就像在筆視圖中一樣，我希望將三張卡片居中，如果添加另一個帖子，則四張卡片會相應地居中。這是CSS：
.card-wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
grid-gap: 10px;
align-items: center;
justify-content: space-around;
}
.card {
height: 520px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
background: #fff;
transition: all 0.5s ease;
cursor: pointer;
user-select: none;
z-index: 10;
overflow: hidden
}
我認為問題出grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));在線路上，但我不知道如何解決。感謝幫助。
uj5u.com熱心網友回復：
你是對的。問題出在網格模板列中：repeat(auto-fill, minmax(240px, 1fr)); 線。您可以將其從絕對值更改為相對值。像那樣：
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
.container {
min-height: 80vh;
padding: 20px 0;
display: flex;
}
.card-wrapper {
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr ));
grid-gap: 10px;
align-items: center;
justify-content: space-around;
}
uj5u.com熱心網友回復：
添加到卡片包裝
margin: 0 auto;
添加到容器 *編輯
顯示：彈性；
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/344713.html
下一篇：懸停元素B時對元素A的過渡效果