Removing margin from around the outside of the svgs

[asasass]

How would I do this?
https://jsfiddle.net/jewztoh6/2/

[asasass]

Is this the best I can do?
https://jsfiddle.net/uwnqhLyd/1/

.thePlay {
  /*margin: 5px;*/
}

.playa {
  margin: 0 5px 5px 0;
}

.playb {
  margin: 0 5px 5px 5px;
}

.playc {
  margin: 0 0 5px 5px;
}

.playd {
  margin: 5px 5px 5px 0;
}

.playe {
  margin: 5px 5px 5px 5px;
}

.playf {
  margin: 5px 0 5px 5px;
}

.playg {
  margin: 5px 5px 0 0;
}

.playh {
  margin: 5px 5px 0 5px;
}

.playi {
  margin: 5px 0 5px 5px;
}

[PaulOB]

@asasass

Is this the best I can do?

Why don’t you get rid of all that and re-instate the gap property that you have set to zero on the outer?

.outer{gap:10px}

[asasass]

Got it, that works much better.
https://jsfiddle.net/31zvju4L/

.outer {
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  width: 290px;
  box-sizing: border-box;
  justify-content: center;
  align-content: center;
  margin: auto;
  gap: 10px;
  background: red;
}