.gllery {
  --g: 6px; /* the gap */
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: white;
  display: grid;
  width: 450px; /* the size */
  aspect-ratio: 1;
  grid: auto-flow 1fr/repeat(3,1fr);
  gap: var(--g);
}
.gllery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: .5s
}
.gllery img:hover {
  filter: grayscale(0);
}
.gllery img:nth-child(2) {
  grid-area: 1/2/span 2/span 2;
  clip-path: polygon(0 0,100% 0,100% 100%,calc(50% + var(--g)/4) 100%,0 calc(50% - var(--g)/4))
}
.gllery img:nth-child(3) {
width: 100%;
  grid-area: 2/1/span 2/span 2;
  clip-path: polygon(0 0,calc(50% - var(--g)/4) 0,100% calc(50% + var(--g)/4),100% 100%,0 100%);
}