responsive grid of hexagons

CSS和HTML響應性六角形網格。

查看現場演示

Flexbox VS CSS網格

該分支使用Flexbox佈局。 CSS網格分支上使用CSS網格佈局的另一個版本。
CSS網格的瀏覽器支持比FlexBox較低（請參閱Caniuse），但使Hexagon間距更易於理解和使用。

特徵

• 六邊形網格根據容器的寬度（ #hexGrid ）響應迅速
• 己糖根據其寬度保持其縱橫比
• 每行六角形的數量是自適應的，並且在媒體查詢中斷點上從5變為2變為2
• 標題和短文滑動六角形懸停並集中精力
• 六角形，可以用選項卡（鍵盤導航）循環循環

文字和懸停效應：

在hexagons.css樣式表中確定了文本和懸停效果的CSS。您可以完全刪除它或更改懸停效果，字體，字體大小...

更改每行六角形的數量：

.hex元素的寬度定義了每行六邊形的數量。需要更改的CSS屬性都在媒體查詢中，在HEXAGON SIZING AND EVEN ROW INDENTATION評論下。
每個媒體查詢都會更改每行六角形的數量。

要更改每行六角形的數量，您需要：

.hex的寬度

使用以下方式自定義.hex元素

 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

奇數行上8個六六角形的示例（這意味著什至會在行上有7個六六角形）：

 w = 100 / 8 = 12.5%

縮進甚至排

偶數行（第二，第四，第六...）在第一個偶數六角形上縮進了margin-left 。

選擇器：
您可以使用.hex:nth-child(an+b)選擇器選擇六角形（在MDN上的nth-child()偽級上有關更多信息）。要確定選擇器，您可以使用此規則：

 .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

奇數行上8個六六角形的示例（這意味著什至會在行上有7個六六角形）：

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

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

左翼的價值：
剩餘邊距的價值是一個六角形的寬度的一半，因此在奇數行上進行8個六角形：

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

---

由Web-Tiki創建