Display Grid or Flex not working when I map through an array of objects in react. This is an example Below

This is what I expected:

This is what I did!

I want to be able to display them in a row not in columns. When I hardcode them without mapping or objects, they work well, but when I map through them, the flex stop working and it goes into a column. Please help me with this, it is very important for me. The funny thing is I did some part the same way on this particular project and they worked, but here, it is not working. Please help me. Thank you.

Below is the Component itself.

import React from "react";

const FacilityCardBody = (props) => {
  return (
    <div>
      <div className="cards-body">
        <div className="cards-content d-flex align-items-start justify-content-center">
          {props.icon}
          <div className="cards-texts ms-4">
            <p className="lang-typeface mb-0">{props.title}</p>
            <p>{props.details}</p>
            {props.actionBtn}
          </div>
        </div>
      </div>
    </div>
  );
};

export default FacilityCardBody;

This is where I mapped through it using map function.

import React from "react";
import "./Facilities.css";
import FacilityCardBody from "./FacilityCardBody";
import facilityDetails from "./fCardBody";

const createFacilityCard = (facilityDetail) => {
  return (
    <FacilityCardBody
      icon={facilityDetail.icon}
      title={facilityDetail.title}
      details={facilityDetail.details}
      actionBtn={facilityDetail.actionBtn}
    />
  );
};

const Facilities = () => {
  return (
    <div>
      <div className="f-container">
        <div className="f-header">
          <h1>Our Services</h1>
          {/* <p>
            Sint sint laborum non cupidatat laborum ullamco consequat anim
            dolore laborum sint eiusmod ex et.
          </p> */}
        </div>
        {facilityDetails.map(createFacilityCard)}
      </div>
    </div>
  );
};

export default Facilities;

This is the array objects

import FacilityActionButton from "./FacilityActionButton";

const icon = [
  <i className="fa-solid fa-building-columns"></i>,
  <i className="fa-solid fa-wallet"></i>,
  <i className="fa-solid fa-book-open"></i>,
  <i className="fa-solid fa-house"></i>,
  <i className="fa-solid fa-file"></i>,
  <i className="fa-solid fa-id-card"></i>,
];
const actionBtn = <FacilityActionButton />;

const facilityDetails = [
  {
    id: 1,
    icon: icon[0],
    title: "Find Colleges Abroad",
    details:
      "Our seamless process helps you find schools that match with all your requirements ranging from type of degree, field of study, financial budget etc. Yes we can help if you need full financial assistance to fund your degree!",
    actionBtn: actionBtn,
  },
  {
    id: 2,
    icon: icon[1],
    title: "Access to Scholarships",
    details:
      "Whether you are in search of an academic or athletic scholarship, Glofi can help identify potential scholarships to match your financial budget.",
    actionBtn: actionBtn,
  },
  {
    id: 3,
    icon: icon[2],
    title: "Mentorship",
    details:
      "Glofi members get access to mentors who have been in your position and can provide valuable advice.",
    actionBtn: actionBtn,
  },
  {
    id: 4,
    icon: icon[3],
    title: "Housing and Accommodation",
    details:
      "Once you have gotten your admission and visa, Glofi can assist with options of housing and accommodation arrangements.",
    actionBtn: actionBtn,
  },
  {
    id: 5,
    icon: icon[4],
    title: "Test Registration & Preparation",
    details:
      "Glofi provides members with a tailored and self paced learning curriculum for all testing requirements eg SAT, GRE, TOEFL. These classes are taught by some of the best test prep instructors in the world.",
    actionBtn: actionBtn,
  },
  {
    id: 6,
    icon: icon[5],
    title: "Visa Assistance",
    details:
      "Upon admission, we will work with you to make sure you are well prepared to obtain your student visa.",
    actionBtn: actionBtn,
  },
];

export default facilityDetails;

This is the CSS file

.f-container {
    padding: 8rem;
}

.f-header {
    text-align: center
}

.cards-body {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    margin-top: 5rem;
}

.cards-content > i {
    border-radius: 40px;
    background: var(--icon-bg-linear);
    padding: 15px;
    color: var(--white-color);
}

@media screen and (max-width: 1150px) {
    .f-container {
        padding: 2rem 5rem;
    }
}

@media screen and (max-width: 995px) {
    .cards-body {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 650px) {
    .f-container {
        padding: 2rem;
    }

    .cards-body {
        grid-template-columns: repeat(1, 1fr);
    }
}

CodePudding user response：

Display flex and grid you have to apply to the parent element.

You need to move the f-header element outside of f-container:

const Facilities = () => {
    return (
        <div>
            <div className="f-header">
                <h1>Our Services</h1>
                <p>
                    Sint sint laborum non cupidatat laborum ullamco consequat anim
                    dolore laborum sint eiusmod ex et.
                </p>
            </div>
            <div className="f-container">
                {facilityDetails.map(createFacilityCard)}
            </div>
        </div>
    );
};

export default Facilities;

Move the css grid from .cards-body to the .f-container:

.f-container {
  padding: 8rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin-top: 5rem;
}

And change .cards-body to .f-container in the media queries.