Hexi Flexi Grid Layout

在《Sass绘制多边形》和《使用Sass制作菱形网格布局》文章中，我们了解了怎么通过Sass来实现多边形和菱形相关的网格布局，但这些在实际的布局中使用场景并不常见。最近@vmcreative的Hexi Flexi Grid让我感到CSS Grid布局更强大的一面。而这种布局在实际的布局也可以一用。今天把这个仓库中的功能集成了SassMagic中。那么简单的花点时间来看看Hexi Flexi Grid布局。

案例

先上一个Demo的效果：

简单点说就是一个六边形的网格布局。

简介

Hexi Flexi Grid是一个SCSS组件，它是基于CSS的网格布局上创建了一个六边形的网格布局。为这样的布局创建了一个@mixin，而这个@mixin包含了许多可定制的设置，这些设置主要用来控制六边形网格的大小、布局和外观效果等。

特性

Hexi Flexi Grid布局具有一定的特性：

• 纯CSS实现的六边形网格布局，没有任何的JavaScript代码
• 灵活的高度、宽度、列和行数
• 单个单元格、列和行具有独特的样式
• 支持自动背景图像

支持的浏览器

如果你阅读了Hexi Flexi Grid布局的SCSS源码，你不难发现，其中运用的CSS技术，其关键点通过CSS Grid的布局技术实现布局，然后通过clip-path来实现六边形。从而创建了一个网格形的六边形布局。而这两个属性都是CSS的最新特性。如此一来，就需要面对浏览器的支持性。目前Hexi Flexi Grid的布局能支持的浏览器有：

• Firefox 56+
• Chrome 61+
• Safari 10.1+
• iOS Safari 10.3+
• Android Chrome 62+
• IE11或Edge

开始

至于Hexi Flexi Grid 怎么实现，估计很多同学并不太关注，而关注的是怎么使用。那么接下来，我们来看看怎么使用Hexi Flexi Grid。

先来上一个简单的示例，创建一个6x4的多边形网格，如下所示：

那么，问题来了，这样的效果怎么实现。下面的内容简单的介绍一下如何实现。

HTML

上面的示例，我们创建了一个6x4的六边形网格布局，对于任保一个布局，都离不开HTML的布局。针对上面的布局，我们的HTML的结构嵌套，如下所示，不过有一个唯一的id，当然，我们不一定要使用唯一的id，咱们可以使用class之类的。这个根据自己的需求来定，咱们先来看看最基本的六边形网格布局的HTML结构：

<div id="myHexGrid">
    <div class="hexCrop">
        <div class="hexContainer">
            <div class="hex"></div>
            <!-- 中间省略24个`div.hex`的标签 -->
            <div class="hex"></div>
        </div>
    </div>
</div>

在.hexContainer容器内包含了一些div.hex的元素，这些元素等于网格中六边形的网格数目，在这个示例中，是24个。

SCSS

根据你自己的项目需求，引入_hexi-flexi-grid.scss文件。如果你引用的是SassMagic，你只需要将_sassMagic.scss文件引入到你的项目。当然如果你没有使用SassMagic项目，你可以根据你自己的项目结构，把Hexi Flexi Grid对应的SCSS文件引入到你的项目中。比如hex-style.scss：

@import 'path/to/hex-style.scss';

在hex-style（或者说SassMagic中的_hexi-flexi-grid.scss）的内部是一个模块化的代码块（其实也相当于一个简单的CSS或者说SCSS模块），它包含了六边形的网格设置。在id选择器中设置为代码块的顶部，用来匹配顶级的父div的id。比如前在HTML结构中的#myHexGrid。

在#myHexGrid这个唯一的id中，配置@mixins所在要的参数：

#myHexGrid {

    $gridWidth:   40em;       // 'auto',(px,pt,r/em,vw/h)
    $gridHeight:  auto;       // 'auto',(px,pt,r/em,vw/h)
    $columnCount: 6;          // 'auto',(number)
    $rowCount:    4;          // 'auto',(number)
    $hexCount:    auto;       // 'auto',(number)
    $hexLayout:   row;        // 'row','column','strict'
    $gridOrient:  vertical;   // 'vertical','horizontal'
    $crop:        none;       // 'none','crop'
    $cropFactor:  1;          // (number)
    $hexContent:  auto;       // 'auto','center'
    $hexSize:     auto;       // 'auto',(px,pt,r/em,vw/h)
    $hexMargin:   0.5em;      // (px,pt,r/em,vw/h)
    $hexShape:    hexagon;    // 'hexagon','circle'
    $hexColor:    #48a999;    // hexcode,rgb/a,named
    $images:      none;

    ...
}

上面的参数对应了@mixin hexContainer()中的参数。但这只是所需变量的设置，如果真正要实现一个六边形的网格布局之外，除了上述参数的配置之外，还需要：

#myHexGrid {
    $gridWidth:   40em;       // 'auto',(px,pt,r/em,vw/h)
    $gridHeight:  auto;       // 'auto',(px,pt,r/em,vw/h)
    $columnCount: 6;          // 'auto',(number)
    $rowCount:    4;          // 'auto',(number)
    $hexCount:    auto;       // 'auto',(number)
    $hexLayout:   row;        // 'row','column','strict'
    $gridOrient:  vertical;   // 'vertical','horizontal'
    $crop:        none;       // 'none','crop'
    $cropFactor:  1;          // (number)
    $hexContent:  auto;       // 'auto','center'
    $hexSize:     auto;       // 'auto',(px,pt,r/em,vw/h)
    $hexMargin:   0.5em;      // (px,pt,r/em,vw/h)
    $hexShape:    hexagon;    // 'hexagon','circle'
    $hexColor:    #48a999;    // hexcode,rgb/a,named
    $images:      none;

    @include hexWrapper(
        $gridWidth,
        $gridHeight,
        $gridOrient,
        $rowCount,
        $columnCount);
    
    .hexCrop {
        @include hexCrop($crop,$cropFactor)
    }
    
    .hexContainer {
        @include hexContainer(
        $gridWidth,
        $gridHeight,
        $gridOrient,
        $columnCount, 
        $images,
        $rowCount,
        $hexLayout,
        $hexContent,
        $hexShape,
        $hexColor,
        $hexMargin,
        $hexCount,
        $hexSize
        )
    }
}

如此一来，你就能看到上面Demo中展示的6x4的一个六边形的网格布局。

定制

上一个Demo我们看到的6x4的六边形网格布局是一个纯色的网格布局。如果我们希望六边形的网格颜色并全部一样的时候，我们还可以为六边形的风格做一些定制。

六边形的网格样式的定制主要由@mixins hex-style代码块来完成，具体的SCSS代码在这里不做过多展示。

Hexi Flexi Grid为六边形网格中的每一个单独的列、行和单元格分配唯一的类名：

• c-[n]：以列[n]中的每个单元格为目标
• r-[n]：以行[n]中的每个单元格为目标
• c-[n1].r-[n2]：单元格位于列[n1]和行[n2]

如果我们需要给不同的行和列的单元格设置不同的背景色或特殊的样式，我样可以这样做：

#myHexGrid {

    // ...

    margin: 2em; // 网格的外边距为`2em`
    
    // 列一的单元格背景色为`red`
    .c-1 {
        background-color: red;
    }
    
    // 行2的单元格将缩小80%
    .r-2 {
        transform: scale(0.8);
    }
    
    // 列3和行1的单元格，透明度为50%
    .c-3.r-1 {
        opacity:0.5;
    }
    
    // ...
}

通过这样的方式，我们可以定制一些不同的六边形网格布局的效果，比如：

上面的示例，我们看到的都是纯色的六边形，以及后面两行做了一些个性化的定制效果。除此之外，还可以在$images的配置中，设置图片，比如：

#myHexGrid {

    // ...

    $images:
        'path/to/image-1.jpg'
        'path/to/image-2.jpg'
        'path/to/image-3.jpg'
        'path/to/image-4.jpg'
        'path/to/image-5.jpg'
        'path/to/image-6.jpg'
    ;

    // ...

}

如此一来，看到的效果，就如文章中最早提供的Demo效果。

上面的所有Demo效果，并没有向大家展示任何一行有关于SCSS的代码，也就是_hexi-flexi-grid.scss的代码。如果你对源码感兴趣的话，可以在SassMagic的_hexi-flexi-grid.scss文件中阅读源码，除此之外，你也可以在@vmcreative的Hex Flexi Grid仓库中阅读源码。SassMagic中除了Hexi Flexi Grid的的SCSS代码之外，还包含了其了很多有意思的@function和@mixins。如果你感兴趣的话，可以关注这个仓库。

网格配置

虽然我们没有花大篇幅的时间来介绍_hexi-flexi-grid.scss中的源码，但我们有必要了解其中的的参数配置，只有了解这些配置，才能更好的使用六边形的网格布局。

$gridWidth

设置六边形网格的宽度。

$gridHeight

设置六边形网格的高度。

$columnCount

设置六边形网格的列数。

$rowCount

设置六边形网格的行数。

$hexLayout

设置单元格填充网格的方向。

$gridOrient

设置网格单元格对齐的方向。

$crop

设置网格是否为矩形裁剪。

$cropFactor

当网格被裁剪时，设置网格的缩放。

$hexContent

设置单元格的内容。

$hexSize

设置单元格的大小。

$hexMargin

设置单元格外边距。

$hexShape

设置单元格的形状。

$hexColor

设置单元格的背景颜色。

$images

设置六边形单元格的背景图像。文件将按照$gridLayout指定的顺序添加到网格中。如果$images的值为none，将表示单元格的背景为url(none)，不会有任何背景图像填充到单元格。

总结

通过Sass的特性，创建了一个灵活具有弹性的六边形的网格布局。在整篇文章中，并没有剖析六边形网格布局的Sass代码，只是基于_hexi_flexi_grid.scss的@function和@mixins能让我们快速的实现m x n的六边形网格布局。文章的示例，通过几行简单的代码就可以快速的实现六边形的网格布局。当然如果你对Sass的代码感兴趣的话，可以阅读其源码。

除了六边形的网格布局之外，SassMagic还提供了其他一些相关的@function和@mixins。如果你的项目是通过Sass来完成，建议你引用这个库，能帮助你快速实现一些常用的功能模块。如果你对改库感兴趣，欢迎Fork或者点赞。当然，如果你有相关的Mixins，欢迎给我们提Pull Requests。或者你发现其中有误之处，也可以给我们提Issues。希望更多的开发者参与SassMagic的构建和维护。

最后要特别感谢@Vincent Martin给我们提供了一个这么优秀的方案，能帮助我们快速的完成六边形的网格布局。

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。

如需转载，烦请注明出处：https://www.fedev.cn/sass/hexi-flexi-grid.htmlSneaker Podcast