How do I generate square map (stacking squares within a specific shape)

I would like to generate squares within borders of a specific shape (Croatia). This is an example: https://image.shutterstock.com/z/stock-vector-croatia-map-design-white-square-black-background-with-flag-croatia-1460901020.jpg

What I have tried:

I was thinking about using image maps to generate square in such shape. Squares of image maps are transparent and I cannot fill them with colors or images.

I was searching around but I can't find something similar. I was thinking about stacking divs next to each other but it could be even more hard since they need to create a shape of Croatia and never break formation.

Do you have any other idea that might work?</pre>