Last time we put together a custom Hexagon Shape in SwiftUI. Now let’s see what it would take to make a grid filling the screen with these hexagons. This is useful for building a honeycomb or hexagonal tessellation pattern that’s visually interesting and useful for things like showing grids of photos or for overlaying on a TTRPG map.

The shape we built is a regular hexagon and has a flat top, meaning that the shape takes up less height than width. This informs the layout, but you can shift things around for a “pointy-topped” hexagon shape grid as well.

In our shape, we used size to mean the radius of the hexagon at the points, which also means that it’s the length of each side. This means that the height is 2 size and that width is 3 size. As you can see from the grid screenshot, while hexagons touch top to bottom in columns, they are staggered by 1/2 of their width in rows, touching instead at their left and right points.

This means that given a viewport height and width, we...

Read More