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创建