CODEWITHSUNDEEP
csscss-grid
tommy-ling
tommy-ling

Reputation: 49

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

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 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>

Upvotes: 0

Views: 1952

Answers (1)

42matt
42matt

Reputation: 26

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 class="Country"> 
        <img src="https://i.sstatic.net/3V9SV.gif?s=256&g=1">
          <div class="country-desc">
            <p>...</p>
          </div>
      </div>
        <div class="Country"> 
        <img src="https://i.sstatic.net/3V9SV.gif?s=256&g=1">
          <div class="country-desc">
            <p>...</p>
          </div>
      </div>
        <div class="Country"> 
        <img src="https://i.sstatic.net/3V9SV.gif?s=256&g=1">
          <div class="country-desc">
            <p>...</p>
          </div>
      </div>

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

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

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

Upvotes: 1

Related Questions