React 中的响应式卡片网格

Question

我是前端世界的新手，我正在尝试制作一个“响应式”卡片网格，这意味着我想在网格内放置未知数量的卡片并使文本和布局适合 很好。我正在使用 react-bootrap Card 和 CardGroup，这是我目前得到的。

如果我使用太多卡片，它们会被水平拉伸并且不会为更好的布局创建新行，我希望有一个最小宽度，所以如果它不适合它会创建一个新行，但是我不确定如何完成这项工作，或者这是否是最佳做法。

抱歉，如果某些条款不正确；如前所述，我刚刚开始学习。

这是我的 GridCard.js 代码

import React from "react";
import {Card, CardGroup, Button} from "react-bootstrap";
import "./CardGrid.css"

const CardGrid = () => {

    return (
        <CardGroup>
            {Array.from({ length: 10 }).map((_, index) => (
                    <Card className={"card-grid"} key={index}>
                        <Card.Img className={"card-img"} variant="bottom" src={"https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554_960_720.jpg"}/>
                        <Card.Body>
                            <Card.Title><strong>Lorem ipsum dolor sit amet</strong></Card.Title>
                            <Card.Text>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores harum, illum.
                                    Accusamus assumenda commodi consequuntur cumque, delectus deleniti dolorum eum illum
                                    nam nostrum provident quaerat quisquam quos reiciendis, reprehenderit voluptas!</p>
                            </Card.Text>
                            <Button variant="primary"
                                    href="www.google.com"
                                    rel={"noopener noreferrer"}>
                                Learn More
                            </Button>
                        </Card.Body>
                    </Card>
            ))}
        </CardGroup>
    )

}

export default CardGrid

还有我的 CardGrid.css

.card-group {
    justify-content: center;
}

.card-grid, .card {
    padding: 5px 5px !important;
    height: auto !important;
    justify-content: center;
    margin: 1rem;
}

.card-body {
    background-color: #F6F5F5;
    margin: 0;
}

.card-img,
.card-img-top,
.card-img-bottom {
    height: 10rem;
    width: auto;
    align-content: flex-start;
}

.card-text {
    height: fit-content;
    margin-bottom: 2rem;
}

.btn, .btn-primary {
    position: absolute;
    bottom: 5px;
    color: #263238;
    overflow: auto;
}

Answer 1

这是我在另一个项目中使用的复杂的东西，这是父网格容器

.parent{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
    grid-gap: 2rem;
    margin-block: 2rem;
    padding: 0 1rem;
    justify-items: center;
    align-items: center;
}

grid-template-columns 创建的列大小最小为 40rem，最大为 1fr。你可以玩这些尺寸。

但如果您正在寻找更简单的东西，我会像这样使用 display flex 和 flex-wrap

.parent{
  display:flex;
  max-width: 1200px;
  flex-wrap: wrap;
}

更新... 显然我们缺少的是为卡片组件分配宽度，我们通过对卡片组件使用min-width 来修复它