网页布局：12列网格布局

12列网格布局最早是由960.gs提出的网格布局系统(//960.gs/)：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20225.html

12列网格布局在设计系统和CSS Framework中经常使用，比如业内经典的Bootstrap(//getbootstrap.com/)就采用了12列网格布局系统：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20225.html

在社区中也有很多在线工具，帮助我们快速构建12列网格系统，比如 Free CSS Grid Tools & Resources For Developers(//1stwebdesigner.com/free-css-grid-tools-resources/) 一文中罗列的工具。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20225.html

Demo (paulhebertdesigns.com/gridley/)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20225.html

不过这里主要是想和大家一起看看在Flexbox和Grid布局模块中是如何实现12列的网格布局系统。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20225.html

先来看Flexbox布局模块。12列网格布局的HTMl结构一般类似于下面这样：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20225.html

<!-- HTML -->
<flex__grid>
    <flex__row>
        <flex__item col4></flex__item col4>
        <flex__item col4></flex__item col4>
        <flex__item col4></flex__item col4>
    </flex__row>
</flex__grid>
复制代码

注意，12列网格中，一般同一行的列数值和刚好等于12。比如上面的HTML结构，行中有三列，每列的宽度刚好四个网格宽度加两个列间距。并且在计算的时候有一套成熟的计算公式：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20225.html

而且还设计上也会有所差异，比如说距离容器两侧有没有间距等：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20225.html

这些的差异对于计算公式和样式代码的设计都略有差异。我们用其中一个为例：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20225.html

:root {
    --gutter: 10px;
    --columns: 12;
    --span: 1;
}

.flex__container {
    display: flex;
    flex-direction: column;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.flex__row {
    display: flex;
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
}

.flex__row + .flex__row {
    margin-top: 2vh;
}

.flex__item {
    flex: 1 1
        calc((100% / var(--columns) - var(--gutter)) * var(--span));
    margin: 0 var(--gutter);
}

.flex__item1 {
    --span: 1;
}

.flex__item2 {
    --span: 2;
}

.flex__item3 {
    --span: 3;
}

.flex__item4 {
    --span: 4;
}

.flex__item5 {
    --span: 5;
}

.flex__item6 {
    --span: 6;
}

.flex__item7 {
    --span: 7;
}

.flex__item8 {
    --span: 8;
}

.flex__item9 {
    --span: 9;
}

.flex__item10 {
    --span: 10;
}

.flex__item11 {
    --span: 11;
}

.flex__item12 {
    --span: 12;
}
复制代码

你会看到的效果如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20225.html

Demo(codepen.io/airen/embed…)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20225.html

在该示例中采用了CSS自定义属性相关的特性，让整个计算变得更容易一些。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20225.html

对于使用CSS Grid布局模块来实现12列网格布局，相对而言，不管是HTML结构还是CSS代码都会更简易一些。在使用CSS Grid布局模块实现12列网格布局，将会运用到repeat()、minmax()、gap和fr等特性。具体的来看一个示例吧。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20225.html

<!-- HTML -->
<grid__container>
    <grid__item></grid__item>
</grid__container>
复制代码

我们来看CSS代码：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20225.html

• 使用fr将网格均分为相等的值，即每列宽度都是1个fr；配合repeat()函数，即repeat(12, 1fr)创建了12列网格
• 使用gap可以用来控制网格之间的间距
• 配合minmax()还可以设置网格最小值

具体的代码如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20225.html

:root {
    --columns: 12;
    --gap: 10px;
    --span: 1;
}

.grid__container {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    grid-template-rows: 1fr;
    gap: var(--gap);
    padding-left: calc(var(--gap) / 2);
    padding-right: calc(var(--gap) / 2);
}

.grid__item {
    min-block-size: 10vh;
    grid-column: span var(--span);
}

.col1 {
    --span: 1;
}

.col2 {
    --span: 2;
}

.col3 {
    --span: 3;
}

.col4 {
    --span: 4;
}

.col5 {
    --span: 5;
}

.col6 {
    --span: 6;
}

.col7 {
    --span: 7;
}

.col8 {
    --span: 8;
}

.col9 {
    --span: 9;
}

.col10 {
    --span: 10;
}

.col11 {
    --span: 11;
}

.col12 {
    --span: 12;
}
复制代码

你将看到的效果如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20225.html

Demo(codepen.io/airen/embed…)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20225.html

就该示例而言，grid-template-columns: repeat(12, 1fr)创建网格如下图所示：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20225.html

除了上述这种粗暴的方式，还可以更灵活一些，将auto-fit、minmax()以及grid-auto-flow: dense等来创建：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20225.html

.grid__container {
    padding: 1em;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    gap: 1em;
    grid-auto-flow: dense;
}
复制代码

对于.grid__item可以通过grid-column、grid-row来控制网格项目的位置：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20225.html

Demo(codepen.io/airen/embed…)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20225.html

加上grid-auto-flow: dense会根据Grid容器空间，Grid项目会自动流到合适的位置：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20225.html

这种布局对于杂志类的布局非常的适用。有关于这方面更详细的介绍可以阅读@Keir Watson的《Responsive Grid Magazine Layout in Just 20 Lines of CSS(//css-tricks.com/responsive-grid-magazine-layout-in-just-20-lines-of-css/)》一文。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20225.html