Grid space-between leaving a gap on the right when several rows-CodePudding

When I apply grid display and justify-content: space-between to my layout, which contains several rows, the items on the right-hand side have a right margin that's the size of the grid gap space-between gives me. How to avoid that gap and make the very right items aligned to the div edge?

.Countries {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(278px, 1fr));
  justify-content: space-between;
}

<div >
  <div >  
    <img src={country.flags} />
      <div >
        <p>...</p>
      </div>
  </div>

  <div > 
    <img src={country.flags} />
      <div >
        <p>...</p>
      </div>
  </div>

  <div > 
    <img src={country.flags} />
      <div >
        <p>...</p>
      </div>
  </div>

  <div > 
    <img src={country.flags} />
      <div >
        <p>...</p>
      </div>
  </div>

  <div > 
    <img src={country.flags} />
      <div >
        <p>...</p>
      </div>
  </div>

  <div > 
    <img src={country.flags} />
      <div >
        <p>...</p>
      </div>
  </div>
</div>

CodePudding user response：

Is this your desired result? It has no gaps now. Minmax() setted to img width.

.Countries {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(256px, 256px));
  justify-content: center;

}

<div class ="Countries">

      <div > 
        <img src="https://i.stack.imgur.com/3V9SV.gif?s=256&g=1">
          <div >
            <p>...</p>
          </div>
      </div>
        <div > 
        <img src="https://i.stack.imgur.com/3V9SV.gif?s=256&g=1">
          <div >
            <p>...</p>
          </div>
      </div>
        <div > 
        <img src="https://i.stack.imgur.com/3V9SV.gif?s=256&g=1">
          <div >
            <p>...</p>
          </div>
      </div>

      <div > 
        <img src="https://i.stack.imgur.com/3V9SV.gif?s=256&g=1">
          <div >
            <p>...</p>
          </div>
      </div>

      <div > 
        <img src="https://i.stack.imgur.com/3V9SV.gif?s=256&g=1">
          <div >
            <p>...</p>
          </div>
      </div>

      <div > 
        <img src="https://i.stack.imgur.com/3V9SV.gif?s=256&g=1">
          <div >
            <p>...</p>
          </div>
      </div>
   </div>