The markup can go something like this: ĭisplay: flex /* we will talk about this later.

Creating a hexagonal shape using clip-pathĮach hexagon is an inline-block element.

Bennett Feely’s Clippy is a great online generator for clip paths. We will consider a variable S that will define the dimension of our element. This task is fairly easy using clip-path. Making a grid of hexagonsįirst, we create our hexagon shape. For example, we can chuck more hexagons in there by adding more divs, and control both the sizing and spacing using CSS variables.Ĭool, right? And this is only one example among many grids we will build in the same manner. In addition to being responsive, the grid also scales. Resize the demo screen and see the magic. Efficiency is paramount.This is a fully responsive hexagon grid made without media queries, JavaScript, or a ton of hacky CSS. Hales, with his “ The Honeycomb Conjecture.” Bees figured it out long ago, and it’s a good thing, too: beeswax, because it is hard for bees to produce, is precious. For millennia, scientists assumed that it was the most efficient way to fill a plane, but it took until 1999 for someone to prove it: Thomas C. Tessellation ensures that there’s neither wasted space nor wasted energy. Hexagons, which are themselves composed of tessellated triangles, do. Triangles and squares tessellate circles and pentagons do not. Some shapes tessellate, meaning they can be repeated across a surface without leaving gaps or overlapping. Hexagons appear in honeycombs because they’re the most efficient way to fill a space with the least amount of material. Their hives are wondrous constructions, and their hexagonal nature is part brilliance and part accident. But beyond that, they themselves are encoded with the shape: the hexagon is written into their eyes. Bees worldwide are extraordinarily adept at constructing uniform hexagons. But the most obvious natural hexagon is the honeycomb, the geometrically perfect home for bees and their honey.

Perfect hexagon