Modern CSS for a Responsive Hexagon Grid

ByEditor

Five years ago, I wrote about creating a responsive grid of hexagon shapes without media queries or JavaScript. This method works with any number of items and allows easy size and gap control using CSS variables.

I used float, inline-block, and set font-size to 0, which might seem outdated by 2026. Despite its effectiveness and support, we can enhance this with modern features. Over five years, CSS has evolved, allowing us to improve this implementation.

Currently, support is limited to Chrome due to the use of new features like corner-shape, sibling-index(), and unit division.

The CSS code is now shorter with fewer magic numbers. We will explore complex calculations together.

Before exploring the new demo, I suggest reading my previous article. It’s not required, but it helps compare methods and see how CSS has rapidly introduced features making complex tasks easier.

The Hexagon Shape

Let’s begin with the hexagon shape, the main element of our grid. Previously, I used clip-path: polygon() to create it:

.hexagon {
  --s: 100px;
  width: var(--s);
  height: calc(var(--s) * 1.1547);
  clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
}

Now, we use the new corner-shape property with border-radius

Similar Posts