How to change the number of flex items per row with image links?

Question

I want to change the number of flex items in a row, but in this case, the flex items are image links. So I have <img> tags nested within anchor tags.

Below is my HTML and CSS for the project:

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 10px;
}

input[type="search"] {
  height: 40px;
  width: 80%;
  margin: 30px auto;
  border: 1px red solid;
}

.images-container {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  border: 1px red solid;
}

a {
  flex: 25%;
  border: 1px red solid;
}

<div class=container>

  <div class="images-container">
    <a href="https://picsum.photos/id/1/150/150" data-lightbox="image-1"><img src="https://picsum.photos/id/1/150/150" alt="Image 1"></a>
    <a href="https://picsum.photos/id/2/150/150" data-lightbox="image-2"><img src="https://picsum.photos/id/2/150/150" alt="Image 2"></a>
    <a href="https://picsum.photos/id/3/150/150" data-lightbox="image-3"><img src="https://picsum.photos/id/3/150/150" alt="Image 3"></a>
    <a href="https://picsum.photos/id/4/150/150" data-lightbox="image-4"><img src="https://picsum.photos/id/4/150/150" alt="Image 4"></a>
    <a href="https://picsum.photos/id/5/150/150" data-lightbox="image-5"><img src="https://picsum.photos/id/5/150/150" alt="Image 5"></a>
    <a href="https://picsum.photos/id/6/150/150" data-lightbox="image-6"><img src="https://picsum.photos/id/6/150/150" alt="Image 6"></a>
    <a href="https://picsum.photos/id/7/150/150" data-lightbox="image-7"><img src="https://picsum.photos/id/7/150/150" alt="Image 7"></a>
    <a href="https://picsum.photos/id/8/150/150" data-lightbox="image-8"><img src="https://picsum.photos/id/8/150/150" alt="Image 8"></a>
    <a href="https://picsum.photos/id/9/150/150" data-lightbox="image-9"><img src="https://picsum.photos/id/9/150/150" alt="Image 9"></a>
    <a href="https://picsum.photos/id/10/150/150" data-lightbox="image-10"><img src="https://picsum.photos/id/10/150/150" alt="Image 10"></a>
    <a href="https://picsum.photos/id/11/150/150" data-lightbox="image-11"><img src="https://picsum.photos/id/12/150/150" alt="Image 11"></a>
    <a href="https://picsum.photos/id/12/150/150" data-lightbox="image-12"><img src="https://picsum.photos/id/12/150/150" alt="Image 12"></a>
  </div>

</div>

This is my desired mockup: https://ibb.co/pZM4KdC

So as you can see in my code: the <img> within the anchor tags do not take up the full space. Now I fixed this previously by setting the display of the anchor tag to block and then making the width of the image 100%, but this resulted in a vertical scroll on my web page.

I want to eliminate the extra space on the right side of the anchor container, which ends up adding extra spacing between the flex items.

Any possible solutions/w explanation?

I don't know really what your issue is here. Or do you have more than one issue? Could you additionally post an annotated screenshot of your result? — yunzen, Jun 11 '19 at 14:00
Im saying that theres space within the image links. So in the anchor tag, there is space on the right side of the image. How do I remove that? I want the anchor tag to only take the width of the content and not add extra space. — Amandeep Pasricha, Jun 11 '19 at 14:02
Yes it does but I'd like to rather set that space myself, rather than the anchor tags giving the space. — Amandeep Pasricha, Jun 11 '19 at 14:05
use `object-fit`? see https://jsfiddle.net/tq27by5d/ and see https://jsfiddle.net/hp18rosj/ after adding the margin... (for *n flex items per row* you can see an example here: https://stackoverflow.com/questions/39504320/) — kukkuz, Jun 12 '19 at 05:20

score 1 · Accepted Answer · answered Jun 11 '19 at 14:06

Added the following css to your code:

.images-container img {
  width: 100%;
}

.images-container>a {
  flex: calc(100% / 3);
}

You can adjust the number of images per row by changing the flex property in .images-container>a.

Here is the working snippet with newly added css.

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 10px;
}

input[type="search"] {
  height: 40px;
  width: 80%;
  margin: 30px auto;
  border: 1px red solid;
}

.images-container {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  border: 1px red solid;
}

a {
  flex: 25%;
  border: 1px red solid;
}

.images-container img {
  width: 100%;
}

.images-container>a {
  flex: calc(100% / 3);
}

<div class=container>

  <div class="images-container">
    <a href="https://picsum.photos/id/1/150/150" data-lightbox="image-1"><img src="https://picsum.photos/id/1/150/150" alt="Image 1"></a>
    <a href="https://picsum.photos/id/2/150/150" data-lightbox="image-2"><img src="https://picsum.photos/id/2/150/150" alt="Image 2"></a>
    <a href="https://picsum.photos/id/3/150/150" data-lightbox="image-3"><img src="https://picsum.photos/id/3/150/150" alt="Image 3"></a>
    <a href="https://picsum.photos/id/4/150/150" data-lightbox="image-4"><img src="https://picsum.photos/id/4/150/150" alt="Image 4"></a>
    <a href="https://picsum.photos/id/5/150/150" data-lightbox="image-5"><img src="https://picsum.photos/id/5/150/150" alt="Image 5"></a>
    <a href="https://picsum.photos/id/6/150/150" data-lightbox="image-6"><img src="https://picsum.photos/id/6/150/150" alt="Image 6"></a>
    <a href="https://picsum.photos/id/7/150/150" data-lightbox="image-7"><img src="https://picsum.photos/id/7/150/150" alt="Image 7"></a>
    <a href="https://picsum.photos/id/8/150/150" data-lightbox="image-8"><img src="https://picsum.photos/id/8/150/150" alt="Image 8"></a>
    <a href="https://picsum.photos/id/9/150/150" data-lightbox="image-9"><img src="https://picsum.photos/id/9/150/150" alt="Image 9"></a>
    <a href="https://picsum.photos/id/10/150/150" data-lightbox="image-10"><img src="https://picsum.photos/id/10/150/150" alt="Image 10"></a>
    <a href="https://picsum.photos/id/11/150/150" data-lightbox="image-11"><img src="https://picsum.photos/id/12/150/150" alt="Image 11"></a>
    <a href="https://picsum.photos/id/12/150/150" data-lightbox="image-12"><img src="https://picsum.photos/id/12/150/150" alt="Image 12"></a>
  </div>

</div>

Oh yeah I tried this but I don't want the images to get bigger than they already were when I imported them. So I want the anchor tags to adjust to the size of the image instead. How would I do that? — Amandeep Pasricha, Jun 11 '19 at 14:07

TheUnKnown · Answer 2 · 2019-06-11T14:38:54.033

I think what you're looking for is CSS grid:

* {
  box-sizing: border-box;
}

input[type="search"] {
  height: 40px;
  width: 80%;
  margin: 30px auto;
  border: 1px red solid;
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px red solid;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

<div class="grid-container">
   <div class="grid-item">
    <a href="https://picsum.photos/id/1/150/150" data-lightbox="image-1"><img src="https://picsum.photos/id/1/150/150" alt="Image 1"></a>
 </div>
  <div class="grid-item">
    <a href="https://picsum.photos/id/2/150/150" data-lightbox="image-2"><img src="https://picsum.photos/id/2/150/150" alt="Image 2"></a>
 </div>
  <div class="grid-item">
    <a href="https://picsum.photos/id/3/150/150" data-lightbox="image-3"><img src="https://picsum.photos/id/3/150/150" alt="Image 3"></a>
 </div>
  <div class="grid-item">
    <a href="https://picsum.photos/id/4/150/150" data-lightbox="image-4"><img src="https://picsum.photos/id/4/150/150" alt="Image 4"></a>
 </div>
  <div class="grid-item">
    <a href="https://picsum.photos/id/5/150/150" data-lightbox="image-5"><img src="https://picsum.photos/id/5/150/150" alt="Image 5"></a>
 </div>
  <div class="grid-item">
    <a href="https://picsum.photos/id/6/150/150" data-lightbox="image-6"><img src="https://picsum.photos/id/6/150/150" alt="Image 6"></a>
 </div>
  <div class="grid-item">
    <a href="https://picsum.photos/id/7/150/150" data-lightbox="image-7"><img src="https://picsum.photos/id/7/150/150" alt="Image 7"></a>
 </div>
  <div class="grid-item">
    <a href="https://picsum.photos/id/8/150/150" data-lightbox="image-8"><img src="https://picsum.photos/id/8/150/150" alt="Image 8"></a>
 </div>
  <div class="grid-item">
    <a href="https://picsum.photos/id/9/150/150" data-lightbox="image-9"><img src="https://picsum.photos/id/9/150/150" alt="Image 9"></a>
 </div>
  <div class="grid-item">
    <a href="https://picsum.photos/id/10/150/150" data-lightbox="image-10"><img src="https://picsum.photos/id/10/150/150" alt="Image 10"></a>
 </div>
  <div class="grid-item">
    <a href="https://picsum.photos/id/11/150/150" data-lightbox="image-11"><img src="https://picsum.photos/id/12/150/150" alt="Image 11"></a>
 </div>
  <div class="grid-item">
    <a href="https://picsum.photos/id/12/150/150" data-lightbox="image-12"><img src="https://picsum.photos/id/12/150/150" alt="Image 12"></a>
 </div>
  </div>

Source: https://www.w3schools.com/css/css_grid.asp You can change padding accordingly to change the distance between the images.

How to change the number of flex items per row with image links?

2 Answers2