Responsive Hexagon Grid Using Modern CSS

Responsive Hexagon Grid Using Modern CSS

A developer revisited a five-year-old technique for creating a responsive hexagon grid, updating it with modern CSS features for fewer magic numbers and improved efficiency. This new approach relies on properties like corner-shape and sibling-index(), though browser support is currently limited to Chrome.

Why This Matters

Traditional CSS layouts often require complex workarounds like floats, inline-block elements, and font-size manipulation to achieve seemingly simple shapes and responsive behavior. These methods, while functional, can become difficult to maintain and scale. The proliferation of modern CSS features offers the potential to streamline these processes, reducing code complexity and improving performance but requires evaluating feature support across browsers, which can limit immediate widespread application.

Key Insights

• corner-shape support is limited: Currently only well implemented in Chrome.
• sibling-index() simplifies calculations: This function allows for dynamic index-based styling.
• Complex calculations are still required: Despite modern features, achieving a perfect responsive grid requires solving for item placement with formulas.

Working Example

.hexagon {
  width: 100px;
  aspect-ratio: cos(30deg);
  border-radius: 50% / 25%;
  corner-shape: bevel;
}

.container {
  --s: 120px;
  --g: 10px;
  container-type: inline-size;
}

.container > * {
  --_n: round(down,(100cqw + var(--g))/(var(--s) + var(--g)));
  --_m: round(down,(100cqw - (var(--s) - var(--g))/2)/(var(--s) + var(--g)));
  --_i: calc((sibling-index() - 1 + var(--_m))/(var(--_n) + var(--_m)));
  --_c: round(down, 1 - mod(var(--_i), 1));
  margin-left: calc(var(--_c) * (var(--s) + var(--g))/2);
}

Practical Applications

• Data Visualization: Creating visually appealing hexagonal bins for data mapping and analysis.
• Pitfall: Overreliance on experimental CSS properties without considering browser compatibility can lead to inconsistent rendering for users on older browsers.

References:

• https://css-tricks.com/responsive-hexagon-grid-using-modern-css/