本文将用grid布局实现蜂巢(正六边形)状的布局

效果图

• 特点
• 列数确定可控
• 边距确定可控
• 交错排列
• 纯CSS实现

效果图

实现步骤

所谓蜂巢，即多个正六边形交错排列而成

第一步

首先，我们知道在正常情况下，CSS布局是难以实现这种不同行之间相互堆叠同时列交错排布的效果，所以我们需要一种取巧的方法

如果单纯地排列蜂窝状的不规则盒，仅用CSS很难实现，所以我们可以把它抽象为一个矩形，用CSS排列矩形盒就很容易了，用最基础的grid布局即可实现，但单纯的grid布局并不能实现交错排列效果，我们需要实现大致如下的效果：

由于是正六边形，故边距是固定可计算的

假设设置各蜂窝边距为10px，那么：

列边距column-gap：10px

行边距row-gap：六边形边长一半(sin30°) + 10px

第二步

接下来就需要解决交错问题了，对与grid而言，单个交错的网格是实现不了的，但我们可以让子项占据多格，如一个蜂窝占据2格，以此实现交错效果

结构设想图

由于每个蜂窝均占据两格，故边距也占据了两份，如不调整，列边距会是行边距的两倍，会给人错位的感觉，故需对计算公式做一些调整

假设设置各蜂窝边距为10px，那么：

列边距column-gap：5px

行边距row-gap：六边形边长一半(sin30°) + 10px

列边距为原来的一半，行边距不变

最终实现效果图如下

结构图

第三步

为了实现行与行之间交错效果，需要对偶数行进行一些处理，让每一个偶数行第一个蜂窝占据3格

可用子选择器:nth-child()实现

使用grid布局，列数量是可以固定的，假设这里为12格，即可容纳6个蜂窝，即x = 6

那么每偶数行的第一个蜂窝为：

完整代码

• HTML结构

• CSS样式