cómo ajustar el espacio en los elementos de la galería de imágenes con márgenes

en diseños flexibles, elementos con valores flexibles de '0 0 25%' tiene un ancho fijo y no se encoge ni crece. Para agregar espacio entre estos elementos mientras se mantiene una estructura similar a la red, se pueden aplicar márgenes. Sin embargo, la aplicación de un margen del 1% da como resultado huecos que pueden ser demasiado grandes.

para lograr un margen de 1px, use el valor flexible '1 0 22%'. Esto establece la base flex al 22%, asegurando que solo haya cuatro elementos por fila. El valor de crecimiento flexible se establece en 1, lo que permite que los artículos crezcan y llenen el espacio restante dejado por los márgenes. Esto crea una brecha sutil 1px entre los elementos.

#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;
}