DEV Community

Caleb Hearth
Caleb Hearth

Posted on • Originally published at on

Drawing a Hex Grid in SwiftUI

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

Top comments (1)

sloan profile image
Sloan the DEV Moderator

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:

Posts must contain substantial content — they may not merely reference an external link that contains the full post.

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!