Grid column template breaks when width

Everything works in landscape mode it outputs like this:

value#1 value#2 value#3

But when screen width is < 500px it outputs like this:

value#1 value#2value#3

And no it's not a width issue i tried.

.cafe-outputs {
  display: grid;
  position: relative;
  max-height: 50vh;
  overflow-y: scroll;
  padding: 0.5rem;
  top: 2rem;
  grid-template-columns: repeat(3, 1fr);
}
.cafe-outputs p {
  color: black;
  margin: 0 5rem;
  padding: 1rem;
  white-space: nowrap;
}
@media (max-width: 500px) {
  .cafe-outputs p {
    font-size: 1rem !important;
    padding: 0rem;
    margin: 0 auto;
  }
}

    <div >
     <div >      <p>1</p>
     </div>
     <div >        <p>Orange Juice</p>
     </div>
     <div >
      <p>5</p>
      </div>
     </div>

Any suggestions? I've tried debugging many times but i can't seem to find the problem. It works with other inputs/outputs values when the columns are > 4

CodePudding user response：

Seems like you have 2 grid-column-templates on your css. remove one then change it to auto auto auto. I also added the cafe-outputs on your media call to make it space evenly on mobile. Let me know.

.cafe-outputs {
  display: grid;
  position: relative;
  max-height: 50vh;
  overflow-y: scroll;
  padding: 0.5rem;
  top: 2rem;
  grid-template-columns: auto auto auto;
}
.cafe-outputs p {
  color: black;
  margin: 0 5rem;
  padding: 1rem;
}
@media (max-width: 500px) {
  .cafe-outputs p {
    font-size: 1rem !important;
    padding: 0rem;
    margin: 0 auto;
  }
  
  .cafe-outputs {
    padding: 0rem;
    justify-content:space-evenly;
    
    }
}

<div >
     <div >      <p>1</p>
     </div>
     <div >        <p>Orange Juice</p>
     </div>
     <div >
      <p>5</p>
      </div>
     </div>