How to Adjust Spacing in Image Gallery Flex Items with Margins

In flexbox layouts, items with flex values of '0 0 25%' have a fixed width and do not shrink or grow. To add space between these items while maintaining a grid-like structure, margins can be applied. However, applying a 1% margin results in gaps that may be too large.

To achieve a 1px margin, use the flex value '1 0 22%'. This sets the flex-basis to 22%, ensuring that there are only four items per row. The flex-grow value is set to 1, allowing the items to grow and fill the remaining space left by the margins. This creates a subtle 1px gap between the items.

#foto-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 10px;
}

.foto {
  flex: 1 0 22%;
  min-height: 50px;
  margin: 1px;
  background-color: red;
}