-1

I have an image grid with 2 rows(Horizontally).at initial state, the first row has 4 images and the second row has 2 images user will be able to add extra images to the second raw. in first-row images are displaying correctly but when it comes to 2nd row those two images are displaying in the beginning and the end of the row .middle space get empty.i have attached images with this.

This is what I have now enter image description here

      <div class="container-gallery">
           <div class="md-col-5 md-lg-5 col-sm-12" style="padding: 0;margin:0">
               <div class="image-grid">
                   <a href="" *ngFor="let Image of Images">
                       <img class="gallary-images" src="assets/puppy.jpg" alt="">
                   </a>
               </div>
           </div>
       </div>

This is My SCSS

  .container-gallery{
        width: percentageCalculator(870);
        .image-grid{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

        }
        .gallary-images{
            height: percentageCalculator(130);
            width: percentageCalculator(165);
            border-radius: percentageCalculator(6);
            margin-bottom: percentageCalculator(10);
            opacity: 0.7;
        }

    }

This is what I expected

enter image description here

noname
  • 565
  • 6
  • 23
NicoleZ
  • 1,485
  • 3
  • 22
  • 43
  • Is your `container-gallery` using `display: flex`? If so, give it `justify-content: space-between;` – Morpheus Aug 15 '19 at 09:56

1 Answers1

1

space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line

Change justify-content: space-between; to justify-content: flex-start;

Ram Segev
  • 2,563
  • 2
  • 12
  • 24