Why a component moves up and overlaps another component in mobile view in React? But it is ok in min-tablet and desktop view. Why?

Question

I am learning React and trying to build single page portfolio . When I tried to list my projects using grid, the problem ocurred. Is there any grid property to solve this problem. I am tired of trying.

This is my jsx:

const Project = () => {
  return (
    <div className="p">
      <h1 className="p-heading">React Projects</h1>
      <div className="p-card-container">
        {Data.map((item) => {
          return (
            <div className="p-card">
              <img src={item.image} alt="" />
              <h2 className="p-title">{item.title}</h2>
              <div className="p-details">
                <div className="p-btns">
                  <a className="btn" href={item.demo_link} target="_blank">
                    Demo
                  </a>
                  <a className="btn" href={item.github_link} target="_blank">
                    Code
                  </a>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

this is my css:

.p {
  width: 100%;
  height: 100vh;
  padding-top: 2em;
  background-color: beige;
}
.p-heading {
  text-align: center;
}
.p-card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 2em;
  padding: 2em 5em;
  background-color: white;
}
.p-card {
  padding: 2.5rem;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.p-card img {
  width: 100%;
  border-radius: 1em;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
}
.p-btns {
  display: flex;
  justify-content: space-between;
}
.p-btns .btn {
  text-decoration: none;
  padding: 0.5rem 1rem;
  background-color: #59b256;
  color: white;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  border-radius: 8px;
  width: 100px;
}
.p-btns .btn:nth-last-child(1) {
  margin-left: 0.7rem;
}

Note: I have used autofit for grid-template-column. Is it the reason for overlapping upper component.