如何用CSS实现产品卡片的居中三列网格布局？

要将你的产品卡片从单列靠右对齐改为居中的三列网格布局，只需通过添加容器元素+CSS Grid即可实现，以下是具体步骤：

1. 调整模板结构：添加网格容器 #

首先在循环渲染的卡片外层包裹一个容器，用于控制整体布局：

<!-- 新增网格容器 -->
<div class="products-grid">
    {% for product in products %}
        <div class="card">
            <div class="card__top">    
                <!-- 建议填充产品图片的实际URL，替换为空字符串 -->
                <img src="{{ product.image_url }}" alt="{{ product.name }}"/>
            </div>
            <div class="card__bottom">
                <div class="card__prices">
                    <div class="card__price card__price--common">Бесплатно</div>
                </div>
                <p>{{ product.name}}</p>
                <button class="card__add">Подробнее</button>
            </div>
        </div>
    {% endfor %}
</div>

2. 添加CSS样式实现三列网格 #

通过CSS Grid快速构建响应式的三列布局，同时解决靠右对齐问题：

/* 网格容器核心样式 */
.products-grid {
    display: grid;
    /* 三列布局，每列最小宽度250px，剩余空间均分 */
    grid-template-columns: repeat(3, minmax(250px, 1fr));
    /* 卡片之间的间距 */
    gap: 2rem;
    /* 限制网格最大宽度，避免大屏下过于拉伸 */
    max-width: 1200px;
    /* 水平居中容器 */
    margin: 0 auto;
    /* 容器内外边距，避免卡片贴边 */
    padding: 2rem;
    /* 重置可能继承的靠右对齐样式 */
    text-align: left;
}

/* 卡片基础样式优化 */
.card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: box-shadow 0.2s ease;
}

.card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* 产品图片自适应 */
.card__top img {
    width: 100%;
    height: 200px;
    /* 保持图片比例，裁剪多余部分 */
    object-fit: cover;
}

.card__bottom {
    padding: 1.5rem;
}

/* 响应式适配：小屏幕自动调整列数 */
@media (max-width: 900px) {
    .products-grid {
        grid-template-columns: repeat(2, minmax(250px, 1fr));
    }
}

@media (max-width: 600px) {
    .products-grid {
        grid-template-columns: 1fr;
    }
}

关键说明 #

• grid-template-columns: repeat(3, minmax(250px, 1fr))：实现三列等宽布局，同时保证每列最小宽度为250px，自适应剩余空间
• margin: 0 auto：让网格容器在页面水平居中，解决原靠右对齐问题
• gap：替代传统的margin设置卡片间距，更简洁高效
• 响应式媒体查询：在平板和手机屏幕上自动切换为2列/1列布局，提升移动端体验

内容的提问来源于stack exchange，提问作者Глеб Гудалин