时间戳

首页 > 解决方案 > 如何在css网格列中居中项目？

html - 如何在css网格列中居中项目？

问题描述

笔视图：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));条线上，但我不知道如何解决。感谢帮助。

标签： htmlcsscss-grid

解决方案

你说的对。问题出在网格模板列中：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;
}

推荐阅读