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...
Top comments (1)
Hi there, we encourage authors to share their entire posts here on DEV, rather than mostly pointing to an external link.
Sharing your full posts helps ensure that readers don’t have to jump around to too many different pages, and it helps focus the conversation right here in the comments section on DEV.
To be clear, the DEV Terms state:
Also, if you share your full post, you have the option to add a canonical URL directly to your post. This helps with SEO if you are reposting articles!