实现六边形，蜂窝状分布

实现如图

1.html部分

<view class="ibox">
        <view class="gallery-container">
            <view class="gallery">
                <view class="hexagon" v-for="(item, index) in tablist" :key="index"                 @click="topagefl(item.page)">
                        <span>{{ item.name }}</span>
                        <image :src="item.img" mode=""></image>
                </view>
            </view>
        </view>
    </view>

2、js部分(普通列表数据)

3、css部分

.ibox{
    height: calc( 100vh - var(--window-bottom));
     background: #fff;
}
.gallery-container {
    height: 90%;
    display: grid;
    place-content: center; /* 水平垂直方向居中 */
    .gallery {  
        --s: 200upx; /* control the size */
        --g: 12upx; /* control the gap */
        --h:170upx;/* control the height */
        display: grid;
        .hexagon {
            background: #3EAD34;
            grid-area: 1/1; /* 规定从第一行第一列开始显示项目 */
            width: var(--s);
            height: var(--h);
            aspect-ratio: 1.15; /* 宽高比例缩放 */
            object-fit: cover; /* 保持图片原有比例, 会有剪切*/
            clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0 50%); /* 形成六边形 */
            transform: translate(var(--_x, 0), var(--_y, 0)) scale(var(--_t, 1)); /* 对图片进行移动和缩放 */
            cursor: pointer;
            // filter: grayscale(80%); /* 灰度滤镜 */
            transition: 0.2s linear; /* 过渡效果 */
            position: relative;
            image{
                width: 100%;
                height: 100%;
                
                // margin-bottom: -8upx;
            }
            view{
                width: 100%;
                height: 100%;
                position: relative;
            }
            --wy: 36%; /* 第三列以及整体与中心线的位移差别 */
            // 第三列
            &:nth-child(1),&:nth-child(2),&:nth-child(3),&:nth-child(4),&:nth-child(5){
                // --_x: calc(25% - 0.87 * var(--g));
                --_x: var(--wy);
            }
            &:nth-child(1) {
                --_y: calc(-200% - 2* var(--g));
            }
            &:nth-child(2) {
                --_y: calc(-100% - var(--g));
            }
            &:nth-child(3) {
            }
            &:nth-child(4) {
              --_y: calc(100% + var(--g));
            }
            &:nth-child(5) {
               --_y: calc(200% + 2* var(--g));
            }
            
            // 第二列
            &:nth-child(6),&:nth-child(7),&:nth-child(8),&:nth-child(9),&:nth-child(10){
                 --_x: calc(-75% + var(--wy) - 0.87 * var(--g));
            }
            &:nth-child(6) {
                --_y: calc(-150% - 1.5 * var(--g));
            }
            &:nth-child(7) {
               --_y: calc(-50% - 1 * var(--g));
            }
            &:nth-child(8) {
                --_y: calc(50%);
            }
            &:nth-child(9) {
                --_y: calc(150% + 1 * var(--g));
              
            }
            &:nth-child(10) {
               --_y: calc(250% + 1.5 *   var(--g));
            }
            
            // 第一列
            &:nth-child(11) {
              --_x: calc(-150% + var(--wy) - 0.87 * 2 * var(--g));
            }
            
            // 第四列
            &:nth-child(12),&:nth-child(13),&:nth-child(14){
                 --_x: calc(75% + var(--wy) + 0.87 * var(--g));
            }
            &:nth-child(12) {
                --_y: calc(-150% - 1.5 * var(--g));
            }
            &:nth-child(13) {
                 --_y: calc(-50% - 1 * var(--g));
            }
            &:nth-child(14) {
                --_y: calc(50%);
            }
        }
    }
}