网站布局：12列网格布局

12列网格布局最早由960.gs网格布局系统（//960.gs/）提出：

12列网格布局用于设计系统和CSS它经常在框架中使用。比如业界经典的Bootstrap（http://getbootstrap.com/）就采用了12列的网格布局系统：

社区里也有很多在线工具可以帮助我们快速创建12列的网格系统构建，例如文章《面向开发人员的免费 CSS 网格工具和资源》(//1stwebdesigner.com/free-css-grid-tools-resources/) 中列出了这些工具。

Demo (paulhebertdesigns.com/gridley/)

但是这里我主要想和大家看看如何在Flexbox和Grid Layout模块中实现12列的网格布局系统。

首先我们来看看Flexbox布局模块。 12 列网格布局的 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 结构中，一行有三列，每列的宽度正好是四个网格宽度加上两个列间距。并且在计算上有多个成熟的计算公式：

设计上也有差异，比如集装箱两侧是否有距离等。计算公式和样式代码。一切都略有不同。我们以其中一个为例：

: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;
}
复制代码

看到的效果如下：

Demo(codepen.io/airen/embed...)

在这个例子中，自定义了CSS相关的特性属性为使用，使整个计算变得容易一些。

使用CSS网格布局模块来实现12列的网格布局，相对来说，无论是HTML结构还是CSS代码都会变得更加容易。当使用CSS网格布局模块实现12列网格布局时，会用到repeat()、minmax()、gap和fr等功能。让我们具体看一个例子。

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

我们看一下CSS代码：

• 使用fr将网格分成等值，即每列的宽度为1 fr；用repeat()函数，即repeat(12, 1fr)创建一个12列的网格
• 可以用gap来控制网格之间的距离
• 用minmax()，也可以用Minimum设置网格的值

具体代码如下：

: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;
}
复制代码

看到的效果如下：

Demo(codepen.io/airen/embed...)

本例为grid-template -columns : Repeat(12, 1fr) 创建如下所示的网格：

除了上面可怕的方式之外，你还可以通过使用 auto-fit、minmax() 和 grid- Auto-Flow 来更灵活：关闭创建：

.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控制网格。流动：密集会根据网格容器空间自动流动到适当的地方：

这种布局非常适合杂志布局。关于这方面更详细的介绍，可以阅读@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://juejin.im/post/6865107864139087886
来源：掘金
归作者所有。如需商业转载，请联系求作者授权。非商业转载请来源。