Scalable hexagonal grid

Our UI designer has designed a new homepage for our projects. It features a grid of hexagons that serve as buttons. After loggin in certain hexagons will light up depending on the person who logged in. Pretty cool!

However, trying to get this design to scale properly on mobile devices has been a nightmare. If the aspect ratio changes, there will either be too much spacing between the hexagons or they will overlap.
Currently each hexagon is an embedded view. There’s a little bit of space visible between each hexagon. Like a margin.

Does anyone have an idea how to approach this? Maybe a way to make a “group” of components scale as if they were one component?

We’re using v8.0.6

Embedded views always seem to be a bit quirky whenever I’m using them. Depending on the container you have them all in, there might be a couple routes.

My latest use with embedded views, I used breakpoint container to keep ‘scaling’ to a minimum, and just put all the embedded views inside a flex view to group and wrap them depending on the screen size. Seems to work at most resolutions so far, but I guess rectangles might be easier to wrap.

This is what we’re doing already, except for using flex containers, because if you wrap hexagons they will be either next to each other or on top of each other. this is of course because it’s wrapping the bounding boxes and not the actual content.
We’re looking for a sort of honeycomb, hence why questions if scaling groups of components as one component is possible.