Grid space-当几行之间右边留一个空隙

Question

当我将网格显示和 justify-content: space-between 应用到包含多行的布局时，右侧的项目有一个右边距，即网格间隙的大小space-between 给我。如何避免该间隙并使最正确的项目与 div 边缘对齐？

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

<div class="Countries">
  <div class="Country">  
    <img src={country.flags} />
      <div class="country-desc">
        <p>...</p>
      </div>
  </div>

  <div class="Country"> 
    <img src={country.flags} />
      <div class="country-desc">
        <p>...</p>
      </div>
  </div>

  <div class="Country"> 
    <img src={country.flags} />
      <div class="country-desc">
        <p>...</p>
      </div>
  </div>

  <div class="Country"> 
    <img src={country.flags} />
      <div class="country-desc">
        <p>...</p>
      </div>
  </div>

  <div class="Country"> 
    <img src={country.flags} />
      <div class="country-desc">
        <p>...</p>
      </div>
  </div>

  <div class="Country"> 
    <img src={country.flags} />
      <div class="country-desc">
        <p>...</p>
      </div>
  </div>
</div>

Answer 1

这是您想要的结果吗？现在没有缝隙了。 Minmax() 设置为 img 宽度。

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

}

<div class ="Countries">

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

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

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

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

Grid space-当几行之间右边留一个空隙

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

css

css-grid