In this blog post, we’re going to learn how to create a visually appealing, responsive grid of hexagons using CSS and HTML. This design technique can enhance the aesthetic of your website while maintaining functionality. You can view a live demo of our project here.

Flexbox vs CSS Grid

For this project, we’ve utilized flexbox to layout the hexagons. There’s also a version available using CSS grid layout on the css-grid branch. Although CSS grid boasts some impressive capabilities, it has lower browser support compared to flexbox (check your understanding about browser compatibility on Can I use). Flexbox, on the other hand, simplifies spacing and arrangement while enabling a responsive layout.

Features of Our Hexagon Grid

• Responsive design adapts according to the container’s width (#hexGrid).
• Hexagons maintain their aspect ratio based on their width.
• The number of hexagons per row adjusts automatically, changing from 5 to 2 based on media query breakpoints.
• Titles and short texts slide in during hexagon hover and focus.
• Keyboard navigation allows cycling through hexagons with the Tab key.

Text and Hover Effects

The styles for text appearance and hover effects can be customized within the hexagons.css stylesheet. You can opt to remove these styles or modify them to fit your design preferences, such as changing the hover effect, font, or font-size.

Changing the Number of Hexagons per Row

To adjust the number of hexagons in each row, you must edit the CSS properties regarding the width of the `.hex` elements. All adjustments take place in the media queries found under the comment HEXAGON SIZING AND EVEN ROW INDENTATION.

Steps to Change the Number of Hexagons per Row

1. Width of .hex

Customize the width of the .hex elements with the following formula:

w = width of the .hex elements in percent

x = the number of hexagons you want on the odd rows (1st, 3rd, 5th...)

w = 100 / x

For example, to have 8 hexagons on odd rows (resulting in 7 hexagons on even rows):

w = 100 / 8 = 12.5%

2. Indent Even Rows

Indent the even rows (2nd, 4th, 6th…) using margin-left on the first hexagon of those rows. Select this hexagon with the .hex:nth-child(an+b) selector. For understanding the selector better, here’s a breakdown:

X = number of hexagons on odd rows

Y = number of hexagons on even rows

A = X + Y

B = X + 1

Using the earlier example (8 hexagons on odd rows, meaning 7 on even):

• X = 8
• Y = 7
• A = 8 + 7 = 15
• B = 8 + 1 = 9
• Selector: .hex:nth-child(15n+9)

Value of Margin-Left

The margin-left value should be half the width of one hexagon. For 8 hexagons on an odd row where the width of hexagons is 12.5%, you calculate it as:

margin-left = 12.5 / 2 = 6.25%

Troubleshooting Tips

If you encounter any challenges while implementing the hexagon grid, consider these troubleshooting ideas:

• Ensure all URL links are correctly placed in your code.
• Check media query breakpoints to confirm they match your desired layouts.
• Review flexbox properties to guarantee all hexagons maintain appropriate spacing.
• For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.