В новом сайте захотелось подчеркнуть единство, комплексность, взаимосвязанность образовательных направлений, расположив ассоциирующие миниатюры в виде сот пчелиного улья. Задачка оказалась совсем не тривиальной, однако, применённая метода может служить решением довольно широкого круга задач визуализации. Здесь результаты моих упражнений при создании адаптивной гексагональной сетки. Кроме того, подробно объяснены несколько CSS-селекторов и методов сокращения кода, а так же некоторые трюки для вычисления плавающего значения свойства height элементов CSS.
Создадим неупорядоченный список с ID #grid, который определяет размеры шестигранной сетки. Я использовал ширину в 60% от базового элемента. Сетка будет расположены в центре страницы, для чего используется margin: 0 auto; при вычислении левого и правого отступов. Можно изменять эти значения по своему усмотрению, что бы гексагональная сетка расположилась соответствующим образом относительно базового элемента.