网页布局:12列网格布局

2020年9月13日11:54:50 发表评论 54 views

12列网格布局最早是由960.gs提出的网格布局系统(//960.gs/):

网页布局:12列网格布局

12列网格布局在设计系统和CSS Framework中经常使用,比如业内经典的Bootstrap(//getbootstrap.com/)就采用了12列网格布局系统:

网页布局:12列网格布局

在社区中也有很多在线工具,帮助我们快速构建12列网格系统,比如 Free CSS Grid Tools & Resources For Developers(//1stwebdesigner.com/free-css-grid-tools-resources/) 一文中罗列的工具。

网页布局:12列网格布局

Demo (paulhebertdesigns.com/gridley/)

不过这里主要是想和大家一起看看在Flexbox和Grid布局模块中是如何实现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结构,行中有三列,每列的宽度刚好四个网格宽度加两个列间距。并且在计算的时候有一套成熟的计算公式:

网页布局:12列网格布局

而且还设计上也会有所差异,比如说距离容器两侧有没有间距等:

网页布局:12列网格布局

这些的差异对于计算公式和样式代码的设计都略有差异。我们用其中一个为例:

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

你会看到的效果如下:

网页布局:12列网格布局

Demo(codepen.io/airen/embed…)

在该示例中采用了CSS自定义属性相关的特性,让整个计算变得更容易一些。

对于使用CSS Grid布局模块来实现12列网格布局,相对而言,不管是HTML结构还是CSS代码都会更简易一些。在使用CSS Grid布局模块实现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()还可以设置网格最小值

具体的代码如下:

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

你将看到的效果如下:

网页布局:12列网格布局

Demo(codepen.io/airen/embed…)

就该示例而言,grid-template-columns: repeat(12, 1fr)创建网格如下图所示:

网页布局:12列网格布局

除了上述这种粗暴的方式,还可以更灵活一些,将auto-fit、minmax()以及grid-auto-flow: dense等来创建:

.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来控制网格项目的位置:

网页布局:12列网格布局

Demo(codepen.io/airen/embed…)

加上grid-auto-flow: dense会根据Grid容器空间,Grid项目会自动流到合适的位置:

网页布局:12列网格布局

这种布局对于杂志类的布局非常的适用。有关于这方面更详细的介绍可以阅读@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
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: