Как добавить больше отступов между шестиугольниками, не теряя отзывчивости?

Question

Я работаю на личном веб-сайте, где хочу показывать гексагональные изображения / плитки на первой странице. Я нашел решение здесь для отзывчивых шестиугольников html и css блоков. Теперь я хочу добавить больше отступов между этими шестиугольниками, не теряя отзывчивости.

Я пытался добавить отступы, но это разрушило общую отзывчивость.

Это оригинальный код, который я нашел здесь .

Я хочу больше отступов между двумя шестиугольниками, например отступы 15px или 20px.

Answer 1

Я не смог найти способ добавить отступ в пикселях, но вот что сработало для меня,

.hexIn {
    width:86%;
    padding-bottom: 99.307%; /* =  width / sin(60) */
}

Уменьшите значение ширины блока hexIn и отступа соответственно. Вы можете визуально проанализировать заполнение между блоками, попробуйте уменьшить / увеличить, пока не заполните удобной.

padding-bottom = (ширина * 2) /1.7320