responsive grid of hexagons

CSS e HTML Grid Responsive de Hexágonos.

Veja a demonstração ao vivo

Flexbox vs CSS Grid

Esta filial usa Flexbox para layout os hexágonos. Outra versão usando o layout da grade CSS está disponível na ramificação CSS-Grid.
O CSS Grid possui suporte de navegador mais baixo que o Flexbox (veja Caniuse), mas facilita o espaçamento do hexágono.

Características

• A grade hexágona é responsiva de acordo com a largura do contêiner ( #hexGrid )
• Os hexágonos mantêm sua proporção de acordo com a largura deles
• O número de hexágonos por linha é adaptável e muda de 5 para 2 em pontos de interrupção da consulta de mídia
• Um título e um texto curto deslizam sobre o pau hexágono e o foco
• Hexágonos e pode ser pedalado com TAB (navegação no teclado)

Efeito de texto e pairar:

O CSS para o efeito de texto e pairar é identificado na folha de estilo hexagons.css . Você pode removê-lo completamente ou alterar o efeito de pairar, fonte, tamanho de fonte ...

Alterando o número de hexágonos por linha:

A largura dos elementos .hex define o número de hexágonos por linha. As propriedades do CSS que precisam ser alteradas estão todas nas consultas da mídia no tamanho do HEXAGON SIZING AND EVEN ROW INDENTATION .
Cada consulta de mídia altera o número de hexágonos por linha.

Para alterar o número de hexágonos por linha , você precisa:

Largura de .hex

Personalize o com os elementos .hex com:

 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

Exemplo para 8 hexágonos em linhas estranhas (isso significa que haverá 7 hexágonos em linhas uniformes):

 w = 100 / 8 = 12.5%

Recuar até linhas

As fileiras uniformes (2ª, 4ª, 6ª ...) são recuadas com margin-left no primeiro hexágono de fileiras uniformes.

O seletor:
Você pode selecionar esse hexágono com o seletor .hex:nth-child(an+b) (mais informações sobre o nth-child() pseudo-classe no MDN). Para determinar o seletor, você pode usar esta regra:

 .hex:nth-child(an+b)

x = the number of hexagons on odd rows(1st, 3rd, 5th...)
Y = the number of hexagons on even rows(2nd, 4th, 6th...)
a = x + y
b = x + 1

Exemplo para 8 hexágonos em linhas estranhas (isso significa que haverá 7 hexágonos em linhas uniformes):

 x = 8
y = 7
a = 8 + 7 = 15
b = 8 + 1 = 9

The selector is : .hex:nth-child(15n+9)

Valor da margem-esquerda:
O valor da margem à esquerda é metade da largura de um hexágono, então para 8 hexágonos na Odd Row:

 with of hexagons = 12.5% (see "width of .hex")
margin-left = 12.5 / 2 = 6.25%

---

Criado por Web-Tiki