How to add 1px margin to a flex item that is flex: 0 0 25%?

Question

I am testing few different layouts with flexbox and I have the following problem.

I have a image gallery with flex items set up flex:0 0 25%; and I woul

Answer 1

It's possible with flex, as shown in another answer to this post.

Your question is also covered in this post: Flexbox: 4 items per row

However, there's an even simpler solution with CSS Grid, if you're interested.

#foto-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1px;
  margin: 10px;
}

.foto {
  min-height: 200px;
  background-color: red;
}

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
1
  
2
  
3