Argthtjtr

I have been trying to center a very simple CSS grid, but it doesn't seem to work out - I would like the grid elements to stay centered when the viewport becomes too small, but one of them is going to the next line (they are centered before and after).

Can anyone tell me what I am doing wrong?

.Listing {

  list-style: none;

  display: grid;

  grid-gap: 10px;

  padding: 10px 40px;

  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

  padding-bottom: 30px;

  background-color: #71F;

  justify-content: center;

}



.Listing li {

  background-color: #F7F;

  border: solid 1px #dddddd;

  height: 150px;

}

<div id="Text">

  <ul class="Listing">

    <li>

      <div></div>

    </li>

    <li>

      <div></div>

    </li>

    <li>

      <div></div>

    </li>

  </ul>

</div>

You have a fixed minimum size.
grid-template-columns: repeat(auto-fill,minmax(300px, 1fr));

When you ask the grid to resize smaller than 300px it will wrap.

Change your min size to a relative unit like % or vh to make it scale.

I would recommend using percentages, as Bryce recommended above. Do bear in mind however, that when setting a width, to accommodate padding and margins. For example, in this instance, in this example, you have 3 list items which you wish to display on one line, as I understand it. It may seem logical to set a percentage dynamic width of 33%, however I would /have set it to 31%, as the padding will knock the width out a bit.
Give this a whirl:

.Listing {

  list-style: none;

  display: grid;

  grid-gap: 10px;

  padding: 10px 30px 30px 20px;

  grid-template-columns: repeat(auto-fill, minmax(31%, 1fr));

  background-color: #71F;

  justify-content: center;

}



.Listing li {

  background-color: #F7F;

  border: solid 1px #dddddd;

  height: 150px;

}

<div id="Text">

  <ul class="Listing">

    <li>

      <div>One</div>

    </li>

    <li>

      <div>Two</div>

    </li>

    <li>

      <div>Three</div>

    </li>

  </ul>

</div>

Well, I ended up finding a solution, pretty simple but really not elegant ... :
I just used margin-left:50%; on the third element.

So it works, but if anyone has a more elegant solution I will be gled to learn it.

Thanks again