Page overflowing with gird repeat auto-fit-CodePudding

I have a grid with an auto-fit. It's working fine, but on smaller (< 350) screens, it's overflowing. How can fixe this? Basically have 350 as long as it's possible and shrink otherwise.

 .grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 1rem;
      }
      .item {
        background-color: crimson;
        height: 200px;
        border-radius: 2rem;
      }

<div >
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
    </div>

CodePudding user response：

This should achieve what you're looking for:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), 1fr));
  gap: 1rem;
}

Your minimum width was not responsive, so I've fixed that by adding a value of 100% inside the minmax using min().

CodePudding user response：

You can nest another property inside minmax(), e.g. min():

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
  gap: 1rem;
}

.item {
  background-color: crimson;
  height: 200px;
  border-radius: 2rem;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>