Some really cool trickery here.

Each item on the grid is clipped by a mask generated by the paint worklet. I am using mask-border-source and mask-border-outset instead of mask-image to make it work with content that is outside of the item. This allows to create non straight lines and overlapping items.

The problem is that each item have its own paint worklet, and there is no way to store a global state. So, I’m using seeded numbers to make sure the whole grid is identically and randomly generated every time in the paint worklet. Then, we only draw the specific mask for one item from the grid (each item have an --id property). To generate a random grid every time, we also set a --seed variable and send it to the worklet.

The grid is fully responsive, and you can play with some CSS properties.

As all other demos, if Paint API is not supported or if JS is disabled, you get a classic grid. It’s just progressive enhancement.

MAPS France

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 3px;
  --irregular-grid-x: 10;
  --irregular-grid-y: 10;
}
.item {
  height: 200px;
  overflow: hidden;
}
@supports (mask-border-source: paint(irregular-grid)) {
  .is-loaded .item {
    overflow: visible;
    --border-width: 20;
    mask-border-source: paint(irregular-grid);
    mask-border-outset: calc(1px * var(--border-width));
  }
}
/*
CSS code needs prefixes: use Autoprefixer
mask-border-source    -webkit-mask-box-image-source
mask-border-outset    -webkit-mask-box-image-outset
*/