Responsive Card Grid in React

user_5495134 0
Viewed 3281

I'm new to the front-end world, and I'm trying to make a "responsive" card grid, meaning I want to place an unknown number of cards inside a grid and make the text and layout fit nicely. I'm using react-bootrap Card and CardGroup, this is what I got so far.

CardGrid

If I use too many Cards, they get horizontally stretched and don't create new rows for a better layout, I'd expect to have a min-width so if it doesn't fit it creates a new row, but I'm not sure how to get this done or if it's the best practice.

Sorry if some of the terms are incorrect; I just started learning as mentioned.

Here is my GridCard.js code

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

and my 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;
}
react-bootstrap reactjs css html javascript
1 Answers

this is something complex I used in another project, this is the parent grid container

.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;
}

Where the grid-template-columns creates a column size from a minimum of 40rem and a maximun of 1fr. You can play with the sizes.

But if you're looking for something simpler, I'd use display flex and flex-wrap like this

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

UPDATE... Apparently what we were missing was assigning a width to the card component, we fixed it by using min-width to the card component

user_173117820
Related