React 中的响应式卡片网格

Posted 2023-03-06

【中文标题】React 中的响应式卡片网格

【英文标题】：Responsive Card Grid in React

【发布时间】：2022-01-14 12:08:40

【问题描述】：

我是前端世界的新手，我正在尝试制作一个“响应式”卡片网格，这意味着我想在网格内放置未知数量的卡片并使文本和布局适合 很好。我正在使用 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;

【参考方案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 来修复它

【讨论】：

我支持使用 flex 和 flex-wrap 而不是网格。这是一种更具可扩展性的方式，您可以设置父容器的最大宽度或每个子元素的最小宽度，以使其响应不同的显示尺寸。

我尝试了两种情况，但都无法正常工作，它一直只显示一行，我会继续尝试，谢谢！

我认为这与您使用 react-bootstrap 的事实有关...我在 Codesandbox codesandbox.io/live/cff55377672 上复制它，但代码未显示为您的图像，添加必要的更改完成它...

另一件事，我不建议使用 !important，这是一种不好的做法。因此，您可能需要将一些其他道具传递给您的引导组件以使其按需要工作

React 路由器应该会影响，只需尝试设置组件样式，我可以帮助您了解发生了什么